create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/tests/cases/sections/layout/header/Header.cases.tsx

@@ -0,0 +1,277 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../../support/case'
+import { Header, type HeaderProps } from '../../../../../src/sections/Header/Header'
+import { headerSchema } from '../../../../../src/sections/Header/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+import { MediaPlaceholder } from '../../../../../src/components/states/media/MediaPlaceholder'
+import * as fx from '../../../../fixtures/index'
+
+/**
+ * 12A · 01 header. Controls are the real typed props with the persisted
+ * option IDs; the page below the header is context only.
+ */
+const preset = (name: string) => resolveSettings(headerSchema, presetsFor('header').find((p) => p.name === name)!.settings).settings
+
+// .dc canonical: the global Brand logo image (Settings → Brand).
+const base: HeaderProps = {
+  ...defaultsOf(headerSchema),
+  shop: fx.shopWithLogo,
+  menu: fx.mainMenu,
+  cart: fx.cartSummary,
+  customer: fx.guest,
+  localization: fx.localization,
+}
+
+function Page({ hero, children }: { hero?: boolean; children: React.ReactNode }) {
+  return (
+    <div style={{ position: 'relative', minHeight: 520 }}>
+      {children}
+      {hero ? (
+        <MediaPlaceholder family="hero" ratio="1280 / 560" rounded={false} />
+      ) : (
+        <main id="main" style={{ padding: 'var(--space-6) var(--page-gutter)' }}>
+          <div style={{ height: 320, borderRadius: 'var(--radius-md)', background: 'repeating-linear-gradient(-45deg, var(--color-bg-muted) 0 1px, transparent 1px 14px), var(--color-bg-muted)', opacity: 0.6 }} />
+        </main>
+      )}
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Header',
+  component: Header,
+  tags: ['autodocs'],
+  args: base,
+  render: (args) => (
+    <Page hero={args.overHero}>
+      <Header {...args} />
+    </Page>
+  ),
+} satisfies Meta<typeof Header>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Overview — the approved presets and key variants, stacked. */
+export const Overview: Story = {
+  render: (args, ctx) => (
+    <div style={{ display: 'grid', gap: 48 }}>
+      {[PresetStandard, PresetCenteredBoutique, BackgroundInverseStuck, MegaMenuOpen].map((s) => (
+        <section key={s.name} aria-label={s.name}>
+          <p style={{ font: '500 11px/1 var(--font-mono)', color: 'var(--color-fg-muted)', padding: '0 var(--page-gutter) 12px' }}>{s.name}</p>
+          {(s.render ?? (meta as { render?: (a: typeof args, c: typeof ctx) => JSX.Element }).render ?? ((a: typeof args) => <Header {...a} />))({ ...args, ...s.args } as typeof args, ctx)}
+        </section>
+      ))}
+    </div>
+  ),
+}
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+// ── Default + approved presets ─────────────────────────────────────────────
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Standard', args: { ...preset('header-standard') } }
+export const PresetCenteredBoutique: Story = { name: 'Preset · Centered boutique', args: { ...preset('header-centered'), shop: fx.shopWithLogo, menu: fx.mainMenuShort } }
+export const PresetOverHero: Story = { name: 'Preset · Over hero', args: { ...preset('header-over-hero'), overHero: true } }
+
+// ── Layout + option variants ───────────────────────────────────────────────
+export const LogoCenter: Story = { name: 'Layout · logo-center', args: { layout: 'logo-center' } }
+export const InlineSearch: Story = { name: 'Option · searchStyle · inline-field', args: { searchStyle: 'inline-field' } }
+export const InlineSearchIgnoredInLogoCenter: Story = { name: 'Option · searchStyle · inline-field ignored in logo-center', args: { layout: 'logo-center', searchStyle: 'inline-field' } }
+export const BackgroundMuted: Story = { name: 'Option · background · surface-secondary', args: { background: 'surface-secondary' } }
+export const BackgroundInverseStuck: Story = { name: 'Option · background · primary (inverse) · stuck 56', args: { background: 'primary', stuck: true } }
+export const Stuck: Story = { name: 'Option · sticky · always · stuck', args: { stuck: true } }
+export const StickyOff: Story = { name: 'Option · sticky · none', args: { sticky: 'none' } }
+export const StickyOnScrollUp: Story = { name: 'Option · sticky · on-scroll-up', args: { sticky: 'on-scroll-up' } }
+export const OverHeroStuckTurnsSolid: Story = { name: 'Option · transparentOnHero · stuck → solid', args: { transparentOnHero: true, overHero: true, stuck: true } }
+export const TransparentWithoutHero: Story = { name: 'Option · transparentOnHero · no hero → stays solid', args: { transparentOnHero: true, overHero: false } }
+
+export const MegaMenuOpen: Story = {
+  name: 'Option · menuStyle · mega · open',
+  args: { openIndex: 0 },
+  parameters: { docs: { description: { story: 'Text-only panel from the nested menu: L2 headings, L3 links, max 5 columns, "Shop all" last.' } } },
+}
+export const SimpleDropdownOpen: Story = { name: 'Option · menuStyle · simple · open', args: { menuStyle: 'simple', openIndex: 0 } }
+export const MegaWithoutThirdLevelFallsBackToSimple: Story = { name: 'Option · menuStyle · mega · 2-level menu renders simple', args: { menu: fx.mainMenuShort, openIndex: 0 } }
+
+// ── Brand resolution (logo image → header.logo text → shop name) ───────────
+export const BrandLogoImage: Story = { name: 'State · Brand · A · global logo image', args: { shop: fx.shopWithLogo } }
+export const BrandLogoText: Story = { name: 'State · Brand · B · header.logo text', args: { shop: fx.shopLegalName, logo: 'Halden & Co.' } }
+export const BrandShopName: Story = { name: 'State · Brand · C · shop name', args: { shop: fx.shopLegalName } }
+export const LogoSmall: Story = { name: 'Option · logoHeight · small', args: { shop: fx.shopWithLogo, logoHeight: 'small' } }
+export const LogoLarge: Story = { name: 'Option · logoHeight · large', args: { shop: fx.shopWithLogo, logoHeight: 'large' } }
+
+// ── Utilities ──────────────────────────────────────────────────────────────
+export const LocaleShown: Story = { name: 'Option · showLocale · on', args: { showLocale: true } }
+export const LocaleSingleMarketHidden: Story = { name: 'Option · showLocale · on · one market → hidden', args: { showLocale: true, localization: fx.localizationSingle } }
+export const CartPage: Story = { name: 'Option · cartAction · page', args: { cartAction: 'page' } }
+/** Clicks `link`; whether the theme's own handler prevented the navigation (then stops it, so the test page stays put). */
+function clickPrevented(link: HTMLElement): boolean {
+  let prevented = false
+  const after = (e: Event) => ((prevented = e.defaultPrevented), e.preventDefault())
+  document.addEventListener('click', after)
+  link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  document.removeEventListener('click', after)
+  return prevented
+}
+/** The cart is always a link to /cart (main #474); cartAction only decides what a click does once the bundle runs. */
+export const CartActionClick: Story = {
+  name: 'Behaviour · cartAction · drawer opens the drawer, page follows the /cart link',
+  args: { onOpenCart: fn() },
+  play: async ({ canvasElement, args }) => {
+    const link = within(canvasElement.querySelector<HTMLElement>('.nv-header .nv-header__side--end')!).getByRole('link', { name: /cart/i })
+    await expect(link).toHaveAttribute('href', '/cart')
+    await expect(clickPrevented(link)).toBe(true)
+    await expect(args.onOpenCart).toHaveBeenCalledTimes(1)
+  },
+}
+export const CartActionPageClick: Story = {
+  name: 'Behaviour · cartAction · page: a click follows the /cart link',
+  args: { cartAction: 'page', onOpenCart: fn() },
+  play: async ({ canvasElement, args }) => {
+    const link = within(canvasElement.querySelector<HTMLElement>('.nv-header .nv-header__side--end')!).getByRole('link', { name: /cart/i })
+    await expect(clickPrevented(link)).toBe(false)
+    await expect(args.onOpenCart).not.toHaveBeenCalled()
+  },
+}
+export const CartCountLines: Story = { name: 'Option · cartCount · lines', args: { cartCount: 'lines', cart: fx.cartSummaryMany } }
+export const LargeCount: Story = { name: 'State · Cart · large item count', args: { cart: fx.cartSummaryMany } }
+export const EmptyCart: Story = { name: 'State · Cart · empty (no badge)', args: { cart: fx.cartSummaryEmpty } }
+export const NoCart: Story = { name: 'State · showCart · off (catalogue-only)', args: { showCart: false } }
+export const NoSearchNoAccount: Story = { name: 'State · showSearch · off · showAccount · off', args: { showSearch: false, showAccount: false } }
+export const SignedIn: Story = { name: 'State · Customer · signed in', args: { customer: fx.customer } }
+
+// ── Missing optional content + stress ──────────────────────────────────────
+export const NoMenu: Story = { name: 'State · Missing · no menu', args: { menu: null } }
+/** An empty menu (a new store's `main-menu`): no nav strip; logo left, utilities pinned to the end. */
+export const EmptyMenuDesktop: Story = {
+  name: 'State · Missing · empty menu · 1280 · no nav strip',
+  tags: ['viewport:desktop'],
+  args: { menu: { handle: 'main-menu', title: 'Main menu', items: [] }, collections: fx.collections },
+  play: async ({ canvasElement }) => {
+    const header = canvasElement.querySelector('.nv-header')!
+    await expect(header.querySelector('.nv-header__nav')).toBeNull()
+    await expect(header.querySelector('.nv-header__brand-cell .nv-header__brand')).not.toBeNull()
+    const end = within(header.querySelector<HTMLElement>('.nv-header__side--end')!)
+    await expect(end.getByRole('button', { name: 'Search' })).toBeInTheDocument()
+    await expect(end.getByRole('button', { name: 'Account' })).toBeInTheDocument()
+    // The cart is a link to /cart (main #474): it works before the browser bundle runs.
+    await expect(end.getByRole('link', { name: /cart/i })).toHaveAttribute('href', '/cart')
+  },
+}
+/** 390 with an empty menu: the Menu button stays, and its drawer offers Home, the collections and Sign in. */
+export const EmptyMenuMobileDrawer: Story = {
+  name: 'Responsive · 390 · empty menu · drawer (Home, collections, Sign in)',
+  tags: ['viewport:mobile'],
+  globals: mobile,
+  args: { menu: { handle: 'main-menu', title: 'Main menu', items: [] }, collections: fx.collections, onOpenSearch: () => {} },
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const menuButton = within(canvasElement.querySelector<HTMLElement>('.nv-header__compact-start')!).getByRole('button', { name: 'Open menu' })
+    await userEvent.click(menuButton)
+    const dialog = await doc.findByRole('dialog', { name: 'Menu' })
+    const d = within(dialog)
+    await expect(d.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/')
+    await expect(d.getByRole('link', { name: 'Kitchen & Table' })).toHaveAttribute('href', '/collections/kitchen-table')
+    await expect(d.getByRole('button', { name: 'Search' })).toBeInTheDocument()
+    await expect(d.getByRole('link', { name: 'Sign in' })).toHaveAttribute('href', '/account')
+  },
+}
+export const FlatMenu: Story = { name: 'Option · Menu · one level', args: { menu: fx.mainMenuFlat } }
+export const LongNavCollapsesToDrawer: Story = {
+  name: 'Stress · long nav → drawer at 1280',
+  tags: ['browser-only', 'viewport:desktop'],
+  args: { menu: fx.mainMenuLong },
+  play: async ({ canvasElement }) => {
+    const header = canvasElement.querySelector('.nv-header')!
+    await waitFor(() => expect(header).toHaveAttribute('data-collapsed'))
+  },
+}
+export const LongStoreName: Story = { name: 'Stress · long store name (wordmark)', args: { shop: fx.shopLong } }
+export const LongStoreNameWithLogo: Story = { name: 'Stress · long name, wide logo image', args: { shop: fx.shopLongWithLogo } }
+
+// ── 390 ────────────────────────────────────────────────────────────────────
+export const Mobile: Story = { name: 'Responsive · 390 · closed', globals: mobile }
+export const MobileWordmark: Story = { name: 'Responsive · 390 · closed · wordmark (no logo image)', globals: mobile, args: { shop: fx.shop } }
+export const MobileDrawerOpen: Story = { name: 'Responsive · 390 · drawer open', globals: mobile, args: { drawerOpen: true } }
+export const MobileDrawerNested: Story = { name: 'Responsive · 390 · drawer · nested level', globals: mobile, args: { drawerOpen: true, drawerPath: [0] } }
+export const MobileSignedInWithLocale: Story = { name: 'Responsive · 390 · drawer · signed in + locale', globals: mobile, args: { drawerOpen: true, customer: fx.customer, showLocale: true } }
+export const MobileLongName1Logo: Story = { name: 'Responsive · 390 · long name 1 · logo image capped 160×24', globals: mobile, args: { shop: fx.shopLongWithLogo } }
+export const MobileLongName2Wordmark: Story = { name: 'Responsive · 390 · long name 2 · 15px, 2 balanced lines', globals: mobile, args: { shop: fx.shopLong } }
+export const MobileLongName3Ellipsis: Story = { name: 'Responsive · 390 · long name 3 · ellipsis', globals: mobile, args: { shop: fx.shopLonger } }
+export const MobileOverHero: Story = { name: 'Responsive · 390 · over hero', globals: mobile, args: { transparentOnHero: true, overHero: true } }
+
+// ── Thai + RTL ─────────────────────────────────────────────────────────────
+export const Thai: Story = { name: 'Stress · Thai · 1280', args: { shop: fx.shopThai, menu: fx.mainMenuThai, localization: fx.localizationThai }, parameters: { nova: { locale: 'th' } } }
+export const ThaiMobileNested: Story = {
+  name: 'Stress · Thai · 390 · nested level',
+  globals: mobile,
+  args: { shop: fx.shopThai, menu: fx.mainMenuThai, drawerOpen: true, drawerPath: [0] },
+  parameters: { nova: { locale: 'th' } },
+}
+export const Arabic: Story = { name: 'Stress · RTL · Arabic · 1280', args: { shop: fx.shopArabic, menu: fx.mainMenuArabic, localization: fx.localizationArabic }, parameters: { nova: { locale: 'ar' } } }
+export const ArabicMobileDrawer: Story = {
+  name: 'Stress · RTL · Arabic · 390 · drawer',
+  globals: mobile,
+  args: { shop: fx.shopArabic, menu: fx.mainMenuArabic, localization: fx.localizationArabic, showLocale: true, drawerOpen: true },
+  parameters: { nova: { locale: 'ar' } },
+}
+
+// ── Theme + legacy ─────────────────────────────────────────────────────────
+export const DarkScheme: Story = { name: 'Stress · Dark scheme', parameters: { nova: { scheme: 'dark' } } }
+export const BrandColour: Story = { name: 'Stress · Brand colour #0F5C4D (count badge)', parameters: { nova: { theme: { colorPrimary: '#0F5C4D' } } } }
+export const LegacyColours: Story = {
+  name: 'Legacy · saved bg / fg still render',
+  args: { ...resolveSettings(headerSchema, { bg: '#F3EDE4', fg: '#3A2E22' }).settings },
+  parameters: { docs: { description: { story: 'LEGACY-HIDDEN: not a control for new stores. Saved values override `background`.' } } },
+}
+export const LegacyLowContrastCorrected: Story = {
+  name: 'Legacy · failing fg auto-corrected to 4.5:1',
+  args: { ...resolveSettings(headerSchema, { bg: '#1F3A5F', fg: '#2A4A70' }).settings },
+  play: async ({ canvasElement }) => {
+    const header = canvasElement.querySelector<HTMLElement>('.nv-header')!
+    // The value is a class rule (@tanqory/theme-kit sx() — no style attribute under the platform CSP).
+    const rules = [...document.styleSheets].flatMap((sheet) => [...sheet.cssRules].map((r) => r.cssText))
+    const own = rules.filter((r) => [...header.classList].some((c) => c.startsWith('tqs-') && r.startsWith(`.${c}`)))
+    await expect(own.join(' ')).toMatch(/--nv-header-fg:\s*#FFFFFF/i)
+  },
+}
+
+// ── Interaction ────────────────────────────────────────────────────────────
+export const KeyboardMegaMenu: Story = {
+  name: 'Accessibility · keyboard mega menu (Enter, ArrowDown, Esc)',
+  tags: ['viewport:desktop'],
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const trigger = c.getByRole('button', { name: 'Kitchen & Table' })
+    trigger.focus()
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'))
+    await waitFor(() => expect(c.getByRole('link', { name: 'Mugs & Cups' })).toBeVisible())
+    await userEvent.keyboard('{Escape}')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(trigger).toHaveFocus()
+    await userEvent.keyboard('{ArrowDown}')
+    await waitFor(() => expect(c.getByRole('link', { name: 'Tableware' })).toHaveFocus())
+  },
+}
+
+export const DrawerFocusAndEscape: Story = {
+  name: 'Accessibility · 390 drawer focus trap, drill in, Esc returns focus',
+  tags: ['viewport:mobile'],
+  globals: mobile,
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const menuButton = within(canvasElement).getByRole('button', { name: 'Open menu' })
+    await userEvent.click(menuButton)
+    const dialog = await doc.findByRole('dialog', { name: 'Menu' })
+    await waitFor(() => expect(dialog.contains(canvasElement.ownerDocument.activeElement)).toBe(true))
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Kitchen & Table' }))
+    await waitFor(() => expect(within(dialog).getByRole('button', { name: 'Back' })).toHaveFocus())
+    await waitFor(() => expect(within(dialog).getByRole('link', { name: 'Shop all Kitchen & Table' })).toBeVisible())
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Back' }))
+    await waitFor(() => expect(within(dialog).getByRole('button', { name: 'Kitchen & Table' })).toHaveFocus())
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(menuButton).toHaveFocus())
+  },
+}

package/templates/nova/tests/cases/sections/marketing/collection-banner/CollectionBanner.cases.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, within } from '../../../../support/case'
+import { CollectionBanner, type CollectionBannerProps } from '../../../../../src/sections/CollectionBanner/CollectionBanner'
+import { collectionBannerSchema } from '../../../../../src/sections/CollectionBanner/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as fx from '../../../../fixtures/index'
+
+const preset = (name: string) => presetArgs(collectionBannerSchema, name)
+
+const trail = [{ title: 'Home', url: '/' }, { title: 'Collections', url: '/collections' }, { title: 'Kitchen & Table' }]
+const base: CollectionBannerProps = { ...defaultsOf(collectionBannerSchema), collection: fx.bannerCollection, breadcrumbs: trail }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Marketing/CollectionBanner',
+  component: CollectionBanner,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof CollectionBanner>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: (args) => <Stack base={args} items={[PresetImage, PresetCompact, PresetText]} render={(a) => <CollectionBanner {...a} />} /> }
+export const Playground: Story = { name: 'Playground' }
+export const PresetImage: Story = { name: 'Preset · Image banner', args: preset('banner-image') }
+export const PresetCompact: Story = { name: 'Preset · Compact', args: preset('banner-compact') }
+export const PresetText: Story = { name: 'Preset · Text only', args: { ...preset('banner-text'), collection: fx.bannerCollectionNoImage } }
+
+export const HeightLarge: Story = { name: 'Option · height · lg 560', args: { height: 'lg' } }
+export const Center: Story = { name: 'Option · contentPosition · center', args: { contentPosition: 'center' } }
+export const NoBreadcrumb: Story = { name: 'Option · showBreadcrumb · off', args: { showBreadcrumb: false } }
+export const NoDescription: Story = { name: 'Option · showDescription · off', args: { showDescription: false } }
+export const Fallback: Story = { name: 'State · no collection image → fallbackImage', args: { collection: fx.bannerCollectionNoImage, fallbackImage: fx.heroImage } }
+export const TextBanner: Story = { name: 'State · no image, no fallback → text banner', args: { collection: fx.bannerCollectionNoImage } }
+export const NoCollection: Story = { name: 'State · no collection · storefront renders nothing', args: { collection: null } }
+export const NoCollectionEditor: Story = { ...NoCollection, name: 'State · no collection · editor "Choose a collection"', parameters: { nova: { mode: 'editor' } } }
+export const UnavailableEditor: Story = { name: 'State · unpublished / deleted · editor explains', args: { collection: null, collectionUnavailable: true }, parameters: { nova: { mode: 'editor' } } }
+export const ThaiLong: Story = { name: 'Stress · Thai · long title · lg', args: { height: 'lg', collection: fx.bannerCollectionThai, breadcrumbs: [{ title: 'หน้าแรก', url: '/' }, { title: 'คอลเลกชัน', url: '/collections' }, { title: fx.bannerCollectionThai.title }] }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · Arabic', args: { collection: { ...fx.bannerCollection, title: 'المطبخ والمائدة', description: 'خزف وزجاج وخشب للطهي والتقديم كل يوم.' } }, parameters: { nova: { locale: 'ar' } } }
+export const DarkScheme: Story = { name: 'Stress · Dark scheme · text banner', args: { ...preset('banner-text'), collection: fx.bannerCollectionNoImage }, parameters: { nova: { scheme: 'dark' } } }
+
+export const Mobile: Story = { name: 'Responsive · 390 · md 360 · description clamps · back link', globals: mobile, args: { collection: fx.bannerCollectionLong } }
+
+export const PageHeading: Story = {
+  name: 'Accessibility · pageHeading → the title is the h1',
+  args: { pageHeading: true },
+  play: async ({ canvasElement }) => expect(within(canvasElement).getByRole('heading', { level: 1 })).toHaveTextContent('Kitchen & Table'),
+}
+export const ReadMore: Story = {
+  name: 'Accessibility · 390 · Read more expands in place',
+  tags: ['browser-only', 'viewport:mobile'],
+  globals: mobile,
+  args: { collection: fx.bannerCollectionLong },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const more = await c.findByRole('button', { name: 'Read more' })
+    await userEvent.click(more)
+    await expect(c.getByRole('button', { name: 'Read less' })).toHaveAttribute('aria-expanded', 'true')
+  },
+}

package/templates/nova/tests/cases/sections/marketing/hero/Hero.cases.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { Hero, type HeroProps } from '../../../../../src/sections/Hero/Hero'
+import { heroSchema } from '../../../../../src/sections/Hero/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as fx from '../../../../fixtures/index'
+
+const preset = (name: string) => presetArgs(heroSchema, name)
+
+// The approved canvas copy (12B · 01).
+const copy = {
+  eyebrow: 'Autumn 2026',
+  heading: 'Slow mornings, made to last.',
+  subtext: 'Stoneware, linen and pantry staples chosen for daily use — and for the decade after.',
+  buttonLabel: 'Shop the collection',
+  buttonLink: '/collections/all',
+  secondaryLabel: 'Our story',
+  secondaryLink: '/pages/about',
+}
+const base: HeroProps = { ...defaultsOf(heroSchema), ...copy, backgroundImage: fx.heroImage }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Marketing/Hero',
+  component: Hero,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Hero>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: (args) => <Stack base={args} items={[PresetEditorial, PresetCampaign, PresetSplitStory, PresetLaunch, PresetFramed, PresetStatement]} render={(a) => <Hero {...a} />} />,
+}
+export const Playground: Story = { name: 'Playground' }
+
+export const PresetEditorial: Story = { name: 'Preset · Editorial', args: { ...base, ...preset('hero-editorial') } }
+export const PresetCampaign: Story = { name: 'Preset · Campaign', args: { ...base, ...preset('hero-campaign') } }
+export const PresetSplitStory: Story = { name: 'Preset · Split story', args: { ...base, ...preset('hero-split-story'), backgroundImage: fx.heroProduct } }
+export const PresetLaunch: Story = { name: 'Preset · Launch', args: { ...base, ...preset('hero-launch') } }
+export const PresetFramed: Story = { name: 'Preset · Framed', args: { ...base, ...preset('hero-framed') } }
+export const PresetStatement: Story = { name: 'Preset · Statement', args: { ...base, ...preset('hero-statement'), secondaryLabel: 'Our story' } }
+
+export const TextFirstLeft: Story = { name: 'Layout · text-first · left · heading beside text', args: { contentAlignment: 'left' } }
+export const ImageBackground: Story = { name: 'Layout · image-background · bottom left', args: { layout: 'image-background', contentAlignment: 'left' } }
+export const Split: Story = { name: 'Layout · split · media right', args: { layout: 'split', contentAlignment: 'left' } }
+export const Contained: Story = { name: 'Layout · contained · radius 12', args: { layout: 'contained', contentAlignment: 'left' } }
+export const Minimal: Story = { name: 'Layout · minimal · text only', args: { layout: 'minimal', contentAlignment: 'left', headerSize: 'large' } }
+
+export const SizeSmall: Story = { name: 'Option · size · small 400', args: { layout: 'image-background', size: 'small', contentAlignment: 'left' } }
+export const SizeLarge: Story = { name: 'Option · size · large 720', args: { layout: 'image-background', size: 'large', contentAlignment: 'left' } }
+export const SizeFullscreen: Story = { name: 'Option · size · fullscreen', args: { layout: 'image-background', size: 'fullscreen', contentAlignment: 'left' } }
+export const PositionTop: Story = { name: 'Option · contentPosition · top', args: { layout: 'image-background', contentPosition: 'top', contentAlignment: 'left' } }
+export const PositionMiddleRight: Story = { name: 'Option · contentPosition · middle · right (flat overlay)', args: { layout: 'image-background', contentPosition: 'middle', contentAlignment: 'right' } }
+export const OverlayNone: Story = { name: 'Option · overlay · none (floor still applies)', args: { layout: 'image-background', overlay: 'none', contentAlignment: 'left' } }
+export const OverlayStrong: Story = { name: 'Option · overlay · strong', args: { layout: 'image-background', overlay: 'strong', contentAlignment: 'left' } }
+export const TextWidthWide: Story = { name: 'Option · textWidth · wide', args: { layout: 'image-background', textWidth: 'wide', contentAlignment: 'left' } }
+export const FitContain: Story = { name: 'Option · imageFit · contain (split)', args: { layout: 'split', imageFit: 'contain', backgroundImage: fx.heroProduct, contentAlignment: 'left' } }
+export const MediaLeft: Story = { name: 'Option · mediaPosition · left (split)', args: { layout: 'split', mediaPosition: 'left', contentAlignment: 'left' } }
+export const RatioPortrait: Story = { name: 'Option · imageRatio · portrait (split)', args: { layout: 'split', imageRatio: 'portrait', backgroundImage: fx.heroProduct, contentAlignment: 'left' } }
+export const RatioSquare: Story = { name: 'Option · imageRatio · square (text-first)', args: { imageRatio: 'square' } }
+export const FocalTop: Story = { name: 'Option · focalPoint · top', args: { layout: 'image-background', focalPoint: 'top', contentAlignment: 'left' } }
+export const SurfaceSecondary: Story = { name: 'Option · background · surface-secondary', args: { background: 'surface-secondary' } }
+
+export const VideoImageBackground: Story = { name: 'Video · image-background · poster = image', args: { layout: 'image-background', contentAlignment: 'left', video: fx.heroVideo, mobileVideo: fx.heroVideoPortrait, mobileImage: fx.heroPortrait } }
+export const VideoSplit: Story = { name: 'Video · split · media side', args: { layout: 'split', contentAlignment: 'left', video: fx.studioVideo, backgroundImage: fx.heroEditorial, eyebrow: 'From the studio', heading: 'Thrown, trimmed, glazed.', secondaryLabel: '' } }
+export const VideoTextFirst: Story = { name: 'Video · text-first · below the copy', args: { video: fx.heroVideo, subtext: '', eyebrow: '', secondaryLabel: '' } }
+export const VideoContained: Story = { name: 'Video · contained', args: { layout: 'contained', contentAlignment: 'left', video: fx.studioVideo, backgroundImage: fx.heroEditorial, eyebrow: '', subtext: '', heading: 'Linen, woven in Lamphun.', buttonLabel: 'Shop linen', secondaryLabel: '' } }
+export const VideoReducedMotion: Story = {
+  name: 'Video · reduced motion · poster + play button',
+  args: { ...VideoImageBackground.args },
+  parameters: { nova: { motion: 'reduced' } },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await waitFor(() => expect(c.getByRole('button', { name: 'Play video' })).toBeInTheDocument())
+  },
+}
+export const VideoFailed: Story = {
+  name: 'Video · failed · poster stays, controls hide',
+  tags: ['browser-only'],
+  args: { layout: 'image-background', contentAlignment: 'left', video: fx.brokenVideo, backgroundImage: fx.heroEditorial },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(within(canvasElement).queryByRole('button', { name: /video/ })).toBeNull(), { timeout: 4000 })
+  },
+}
+
+export const NoImageFallback: Story = { name: 'State · image-background without image → minimal', args: { layout: 'image-background', backgroundImage: null } }
+export const NoImageEditor: Story = { name: 'State · image layout without image · editor setup frame', args: { layout: 'image-background', backgroundImage: null }, parameters: { nova: { mode: 'editor' } } }
+export const ImageFailed: Story = { name: 'State · image failed → minimal', tags: ['browser-only'], args: { layout: 'image-background', backgroundImage: fx.stress.brokenImage } }
+export const EmptyEditor: Story = { name: 'State · empty · editor setup frame', args: { eyebrow: '', heading: '', subtext: '', buttonLabel: '', secondaryLabel: '', backgroundImage: null }, parameters: { nova: { mode: 'editor' } } }
+export const LongHeading: Story = {
+  name: 'Stress · heading over 12 words steps down one size',
+  args: { layout: 'image-background', contentAlignment: 'left', heading: 'Slow mornings, made to last — stoneware, linen and pantry staples for every day of the year' },
+  play: async ({ canvasElement }) => expect(canvasElement.querySelector('.nv-hero-copy__heading')).toHaveAttribute('data-size', 'small'),
+}
+export const Thai: Story = {
+  name: 'Stress · Thai · long heading',
+  args: { layout: 'image-background', contentAlignment: 'left', eyebrow: 'คอลเลกชันฤดูใบไม้ร่วง 2026', heading: 'เช้าที่ช้าลง กับของใช้ที่อยู่กับคุณไปอีกนานหลายปี', subtext: '', buttonLabel: 'เลือกชมคอลเลกชัน', secondaryLabel: '' },
+  parameters: { nova: { locale: 'th' } },
+}
+export const Arabic: Story = { name: 'Stress · RTL · Arabic · split mirrors', args: { layout: 'split', contentAlignment: 'left', eyebrow: 'خريف 2026', heading: 'صباحات هادئة، مصنوعة لتدوم.', subtext: 'خزف وكتان ومؤن يومية مختارة للاستخدام اليومي.', buttonLabel: 'تسوق المجموعة', secondaryLabel: 'قصتنا' }, parameters: { nova: { locale: 'ar' } } }
+export const DarkScheme: Story = { name: 'Stress · Dark scheme', parameters: { nova: { scheme: 'dark' } } }
+
+export const MobileTextFirst: Story = { name: 'Responsive · 390 · text-first · two buttons one row', globals: mobile }
+export const MobileImageBackground: Story = { name: 'Responsive · 390 · image-background · primary full width', globals: mobile, args: { layout: 'image-background', contentAlignment: 'left', mobileImage: fx.heroPortrait, subtext: 'Stoneware, linen and pantry staples.' } }
+export const MobileSplitBefore: Story = { name: 'Responsive · 390 · split · media before', globals: mobile, args: { layout: 'split', contentAlignment: 'left' } }
+export const MobileSplitAfter: Story = { name: 'Responsive · 390 · split · mobileMediaPosition after', globals: mobile, args: { layout: 'split', contentAlignment: 'left', mobileMediaPosition: 'after' } }
+export const MobileThai: Story = { name: 'Responsive · 390 · Thai · floor grows with text', globals: mobile, args: { ...Thai.args, mobileImage: fx.heroPortrait }, parameters: { nova: { locale: 'th' } } }
+export const MobileVideo: Story = { name: 'Responsive · 390 · video · pause beside the CTA', globals: mobile, args: { ...VideoImageBackground.args, eyebrow: '', subtext: '', secondaryLabel: '' } }
+export const MobileAlignCenter: Story = { name: 'Responsive · 390 · mobileContentAlignment center', globals: mobile, args: { layout: 'image-background', contentAlignment: 'left', mobileContentAlignment: 'center' } }
+
+export const PauseVideo: Story = {
+  name: 'Accessibility · the video pause button toggles and is labelled',
+  args: { ...VideoImageBackground.args },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Pause video' }))
+    await expect(c.getByRole('button', { name: 'Play video' })).toBeInTheDocument()
+  },
+}
+export const HeadingLevel: Story = {
+  name: 'Accessibility · the first hero is the page h1',
+  args: { headingLevel: 1 },
+  play: async ({ canvasElement }) => expect(within(canvasElement).getByRole('heading', { level: 1 })).toHaveTextContent(copy.heading),
+}
+export const ButtonWithoutLink: Story = {
+  name: 'State · button label without link · storefront hides it (no dead link)',
+  args: { buttonLink: '', secondaryLabel: '' },
+  play: async ({ canvasElement }) => expect(within(canvasElement).queryByText('Shop the collection')).toBeNull(),
+}
+export const ButtonWithoutLinkEditor: Story = {
+  name: 'State · button label without link · editor shows it disabled',
+  args: { buttonLink: '', secondaryLabel: '' },
+  parameters: { nova: { mode: 'editor' } },
+  play: async ({ canvasElement }) => expect(within(canvasElement).getByRole('button', { name: 'Shop the collection' })).toBeDisabled(),
+}

package/templates/nova/tests/cases/sections/marketing/marquee/Marquee.cases.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { Marquee, type MarqueeProps } from '../../../../../src/sections/Marquee/Marquee'
+import { marqueeSchema } from '../../../../../src/sections/Marquee/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+
+const preset = (name: string) => presetArgs(marqueeSchema, name)
+
+const base: MarqueeProps = { ...defaultsOf(marqueeSchema), text: 'New season just dropped · Sea Salt glaze', storageKey: 'lab' }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Marketing/Marquee',
+  component: Marquee,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Marquee>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: (args) => <Stack base={args} items={[PresetTicker, Playground, PresetStatement, PresetInverse]} render={(a) => <Marquee {...a} />} /> }
+export const Playground: Story = { name: 'Playground' }
+export const PresetTicker: Story = { name: 'Preset · Ticker', args: { ...preset('marquee-ticker'), text: 'Hand-glazed in Chiang Mai · Free returns · Repair, not replace' } }
+export const PresetStatement: Story = { name: 'Preset · Statement', args: { ...preset('marquee-statement'), text: 'Made to last' } }
+export const PresetInverse: Story = { name: 'Preset · Inverse band', args: { ...preset('marquee-inverse'), text: 'Autumn sale · Up to 30% off linen' } }
+
+export const DirectionRight: Story = { name: 'Option · direction · right', args: { direction: 'right' } }
+export const SpeedFast: Story = { name: 'Option · speed · fast', args: { speed: 'fast' } }
+export const NoHoverPause: Story = { name: 'Option · pauseOnHover · off (button still shown)', args: { pauseOnHover: false } }
+
+export const Empty: Story = { name: 'State · Empty · storefront renders nothing', args: { text: '' } }
+export const EmptyEditor: Story = { name: 'State · Empty · editor setup frame', args: { text: '' }, parameters: { nova: { mode: 'editor' } } }
+export const ReducedMotion: Story = {
+  name: 'State · reduced motion · static, centred, wraps',
+  args: { text: 'Hand-glazed in Chiang Mai · Free returns · Repair, not replace · Carbon-neutral shipping', size: 'large' },
+  parameters: { nova: { motion: 'reduced' } },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(canvasElement.querySelector('.nv-marquee')).toHaveAttribute('data-state', 'static'))
+    await expect(within(canvasElement).queryByRole('button')).toBeNull()
+  },
+}
+export const Thai: Story = { name: 'Stress · Thai', args: { text: 'เคลือบมือที่เชียงใหม่ · คืนสินค้าได้ฟรี · ซ่อมได้ ไม่ต้องทิ้ง' }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · Arabic · direction mirrors', args: { text: 'مصنوع يدويًا في شيانغ ماي · إرجاع مجاني' }, parameters: { nova: { locale: 'ar' } } }
+export const DarkScheme: Story = { name: 'Stress · Dark scheme', args: { background: 'primary' }, parameters: { nova: { scheme: 'dark' } } }
+
+export const Mobile: Story = { name: 'Responsive · 390 · medium', globals: mobile, args: { text: 'Hand-glazed in Chiang Mai · Free returns' } }
+export const MobileLarge: Story = { name: 'Responsive · 390 · large 32', globals: mobile, args: { size: 'large', text: 'Made to last' } }
+
+export const Pause: Story = {
+  name: 'Accessibility · pause stops the line (WCAG 2.2.2); text read once',
+  args: { storageKey: `lab-pause-${Math.random().toString(36).slice(2)}` },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Pause moving text' }))
+    await expect(canvasElement.querySelector('.nv-marquee')).toHaveAttribute('data-state', 'paused')
+    await expect(c.getByRole('button', { name: 'Play moving text' })).toBeInTheDocument()
+    // Only the first copy is exposed.
+    const exposed = [...canvasElement.querySelectorAll('.nv-marquee__unit')].filter((u) => !u.closest('[aria-hidden="true"]'))
+    await expect(exposed).toHaveLength(1)
+  },
+}