create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/sections/layout/footer/Footer.cases.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, within } from '../../../../support/case'
+import { Footer, type FooterBlock, type FooterProps } from '../../../../../src/sections/Footer/Footer'
+import { footerSchema } from '../../../../../src/sections/Footer/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+import * as fx from '../../../../fixtures/index'
+
+const preset = (name: string) => resolveSettings(footerSchema, presetsFor('footer').find((p) => p.name === name)!.settings).settings
+
+const brand: FooterBlock = { type: 'footer-brand', settings: { title: 'Halden & Co.', tagline: 'Everyday stoneware, linen and pantry goods, made in small batches in Chiang Mai.' } }
+const menus: FooterBlock[] = [
+  { type: 'footer-menu', settings: { heading: 'Shop' }, menu: fx.footerShop },
+  { type: 'footer-menu', settings: { heading: 'Help' }, menu: fx.footerHelp },
+  { type: 'footer-menu', settings: { heading: 'Studio' }, menu: fx.footerCompany },
+]
+const visit: FooterBlock = { type: 'footer-text', settings: { heading: 'Visit', body: '<p>88 Nimmanhaemin Soi 9<br>Chiang Mai 50200</p><p>hello@halden.co</p>' } }
+const canonical: FooterBlock[] = [brand, ...menus, visit, { type: 'social-links' }, { type: 'payment-icons' }]
+
+// .dc canonical: global brand logo image.
+const base: FooterProps = { ...defaultsOf(footerSchema), shop: fx.shopWithLogo, blocks: canonical, legalMenu: fx.legalMenu, localization: fx.localization, consentEnabled: true }
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Footer>
+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 }}>
+      {[PresetFullStore, PresetMinimal, PresetNewsletterLed].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) => <Footer {...a} />))({ ...args, ...s.args } as typeof args, ctx)}
+        </section>
+      ))}
+    </div>
+  ),
+}
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+export const Playground: Story = { name: 'Playground' }
+export const PresetFullStore: Story = { name: 'Preset · Full store', args: { ...preset('footer-full'), blocks: [brand, ...menus] } }
+export const PresetMinimal: Story = { name: 'Preset · Minimal', args: { ...preset('footer-minimal'), shop: fx.shop, legalMenu: fx.legalMenuShort, blocks: [brand, { type: 'footer-menu', settings: {}, menu: fx.footerMinimal }, { type: 'social-links' }] } }
+export const PresetNewsletterLed: Story = {
+  name: 'Preset · Newsletter-led',
+  args: {
+    ...preset('footer-newsletter'),
+    blocks: [{ type: 'newsletter-signup', settings: { heading: 'Letters from the studio', body: 'New glazes and restocks, once a month.', buttonLabel: 'Subscribe on Instagram', buttonUrl: 'https://instagram.com/halden.co' } }, ...menus],
+  },
+}
+export const OneLanguage: Story = { name: 'State · Region · one language → country | currency', args: { localization: { current: fx.markets[0], available: [fx.markets[0], fx.markets[2]] } } }
+export const NewsletterWithEndpoint: Story = {
+  name: 'State · Newsletter block · platform endpoint → form',
+  args: { blocks: [{ type: 'newsletter-signup', settings: { heading: 'Letters from the studio', body: 'New glazes and restocks, once a month.', action: '/contact#newsletter', note: 'Unsubscribe any time.' } }, brand, ...menus] },
+}
+export const BackgroundSurface: Story = { name: 'Option · background · surface (top hairline)', args: { background: 'surface' } }
+export const BackgroundInverse: Story = { name: 'Option · background · primary (inverse)', args: { background: 'primary' } }
+export const Centered: Story = { name: 'Layout · centered', args: { layout: 'centered', background: 'surface', shop: fx.shop, legalMenu: fx.legalMenuShort, blocks: [brand, { type: 'footer-menu', menu: fx.footerMinimal }, { type: 'social-links' }] } }
+export const NoSocialNoPaymentNoLocale: Story = { name: 'State · showSocial · showPayment · showLocale · off', args: { showSocial: false, showPayment: false, showLocale: false } }
+export const NoPoweredBy: Story = { name: 'State · showPoweredBy · off', args: { showPoweredBy: false } }
+export const CustomPoweredBy: Story = { name: 'Option · poweredByLabel · custom', args: { poweredByLabel: 'Built on Tanqory' } }
+export const NoConsent: Story = { name: 'State · Consent off → no "Cookie preferences"', args: { consentEnabled: false } }
+export const BrandContact: Story = { name: 'State · footer-brand · showContact', args: { blocks: [{ ...brand, settings: { ...brand.settings, showContact: true } }, ...menus] } }
+export const BrandTitle: Story = { name: 'State · footer-brand · B · no logo image → title', args: { shop: fx.shop } }
+export const BrandShopName: Story = { name: 'State · footer-brand · C · both blank → shop name', args: { shop: fx.shopLegalName, blocks: [{ type: 'footer-brand', settings: { tagline: 'Everyday stoneware, linen and pantry goods.' } }, ...menus] } }
+export const PaymentMethodsTyped: Story = { name: 'State · payment-icons · methods "visa, jcb, truemoney, bogus"', args: { blocks: [...canonical.filter((b) => b.type !== 'payment-icons'), { type: 'payment-icons', settings: { methods: 'visa, jcb, truemoney, bogus' } }] } }
+export const FourMenusTwoTexts: Story = {
+  name: 'State · Max · 4 menus + 2 text blocks (grid ≤ 6 columns)',
+  args: { blocks: [brand, ...menus, { type: 'footer-menu', settings: { heading: 'More' }, menu: fx.footerMinimal }, { type: 'footer-menu', settings: { heading: 'Ignored 5th' }, menu: fx.footerShop }, visit, { type: 'footer-text', settings: { heading: 'Hours', body: 'Tue–Sun 10:00–18:00' } }] },
+}
+export const MenusOnly: Story = { name: 'State · Missing · no brand block', args: { blocks: menus } }
+export const EmptyMenuSkipped: Story = { name: 'State · Missing · empty menu is skipped', args: { blocks: [brand, { type: 'footer-menu', settings: { heading: 'Empty' }, menu: { handle: 'x', title: 'x', items: [] } }, ...menus.slice(0, 1)] } }
+export const OneMarket: Story = { name: 'State · Missing · one market → no locale control', args: { localization: fx.localizationSingle } }
+export const NoShopLinks: Story = { name: 'State · Missing · shop without social or payment data', args: { shop: fx.shopMinimal, blocks: [brand, ...menus] } }
+export const Empty: Story = { name: 'State · Empty · storefront: legal row only', args: { blocks: [] } }
+export const EmptyEditor: Story = { name: 'State · Empty · editor: setup frame', args: { blocks: [] }, parameters: { nova: { mode: 'editor' } } }
+
+export const Mobile: Story = { name: 'Responsive · 390 · accordion', globals: mobile }
+export const MobileStacked: Story = { name: 'Responsive · 390 · mobileMenus stacked', globals: mobile, args: { mobileMenus: 'stacked' } }
+export const MobileCentered: Story = { name: 'Responsive · 390 · centered', globals: mobile, args: { ...PresetMinimal.args } }
+export const Thai: Story = {
+  name: 'Stress · Thai',
+  args: {
+    shop: fx.shopThai,
+    blocks: [{ type: 'footer-brand', settings: { title: 'ฮัลเดน แอนด์ โค', tagline: 'เครื่องปั้นดินเผา ผ้าลินิน และของใช้ในครัว ทำมือทีละน้อยในเชียงใหม่' } }, { type: 'footer-menu', menu: fx.footerShopThai, settings: { heading: '' } }, { type: 'footer-menu', menu: fx.footerHelpThai, settings: { heading: '' } }, { type: 'social-links' }, { type: 'payment-icons' }],
+    legalMenu: fx.legalMenuThai,
+    localization: fx.localizationThai,
+  },
+  parameters: { nova: { locale: 'th' } },
+}
+export const Arabic: Story = {
+  name: 'Stress · RTL · Arabic',
+  args: { shop: fx.shopArabic, blocks: [{ type: 'footer-brand', settings: { title: 'هالدن وشركاه', tagline: 'أواني خزفية وكتان مصنوعة يدويًا.' } }, { type: 'footer-menu', menu: fx.footerShopArabic }, { type: 'footer-menu', menu: fx.footerHelpArabic }, { type: 'social-links' }], localization: fx.localizationArabic },
+  parameters: { nova: { locale: 'ar' } },
+}
+export const DarkScheme: Story = { name: 'Stress · Dark scheme', parameters: { nova: { scheme: 'dark' } } }
+
+export const InteractionAccordion: Story = {
+  name: 'Accessibility · 390 accordion rows (first closed, state not persisted)',
+  tags: ['browser-only', 'viewport:mobile'],
+  globals: mobile,
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const shopRow = c.getAllByRole('button', { name: 'Shop' }).find((b) => b.offsetParent !== null)!
+    await expect(shopRow).toHaveAttribute('aria-expanded', 'false')
+    await userEvent.click(shopRow)
+    await expect(shopRow).toHaveAttribute('aria-expanded', 'true')
+    await expect(c.getAllByRole('link', { name: 'Kitchen & Table' }).some((l) => l.offsetParent !== null)).toBe(true)
+  },
+}

package/templates/nova/tests/cases/sections/layout/footer/blocks/FooterBrand.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { FooterBrandBlock, footerBrandSchema, type FooterBrandBlockProps } from '../../../../../../src/sections/Footer/blocks/FooterBrand'
+import * as fx from '../../../../../fixtures/index'
+import { blockFrame, blockPlayground } from '../../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Blocks/FooterBrand',
+  component: FooterBrandBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(footerBrandSchema), shop: fx.shopWithLogo, tagline: 'Everyday stoneware, linen and pantry goods, made in small batches in Chiang Mai.' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof FooterBrandBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
+      <FooterBrandBlock {...defaultsOf(footerBrandSchema)} shop={fx.shopWithLogo} tagline="Everyday stoneware, linen and pantry goods." />
+      <FooterBrandBlock {...defaultsOf(footerBrandSchema)} shop={fx.shop} title="Halden & Co." tagline="Everyday stoneware, linen and pantry goods." />
+      <FooterBrandBlock {...defaultsOf(footerBrandSchema)} shop={fx.shopLegalName} tagline="Everyday stoneware, linen and pantry goods." />
+    </div>
+  ),
+}
+export const Playground: Story = blockPlayground<FooterBrandBlockProps>(footerBrandSchema, { shop: fx.shopWithLogo }) as Story
+export const StatesContact: Story = { name: 'States · showContact', args: { showContact: true, shop: fx.shop } }

package/templates/nova/tests/cases/sections/layout/footer/blocks/FooterMenu.cases.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { Footer } from '../../../../../../src/sections/Footer/Footer'
+import { footerSchema } from '../../../../../../src/sections/Footer/schema'
+import * as fx from '../../../../../fixtures/index'
+
+/** A footer-menu block has no rendering of its own — the Footer lays it out (column, or accordion row at 390). */
+function InFooter({ heading, menu }: { heading: string; menu: typeof fx.footerShop | null }) {
+  return <Footer {...defaultsOf(footerSchema)} showSocial={false} showPayment={false} showLocale={false} showPoweredBy={false} shop={fx.shop} blocks={[{ type: 'footer-menu', settings: { heading }, menu }]} />
+}
+const meta = {
+  title: 'Nova/03 Sections/Layout/Blocks/FooterMenu',
+  component: InFooter,
+  tags: ['autodocs'],
+  args: { heading: 'Shop', menu: fx.footerShop },
+} satisfies Meta<typeof InFooter>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const StatesHeadingFallback: Story = { name: 'States · empty heading → menu name', args: { heading: '' } }
+export const Responsive: Story = { name: 'Responsive · 390 accordion row', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/layout/footer/blocks/FooterText.cases.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { Footer } from '../../../../../../src/sections/Footer/Footer'
+import { footerSchema } from '../../../../../../src/sections/Footer/schema'
+import * as fx from '../../../../../fixtures/index'
+
+function InFooter({ heading, body }: { heading: string; body: string }) {
+  return <Footer {...defaultsOf(footerSchema)} showSocial={false} showPayment={false} showLocale={false} showPoweredBy={false} shop={fx.shop} blocks={[{ type: 'footer-text', settings: { heading, body } }]} />
+}
+const meta = {
+  title: 'Nova/03 Sections/Layout/Blocks/FooterText',
+  component: InFooter,
+  tags: ['autodocs'],
+  args: { heading: 'Visit', body: '<p>88 Nimmanhaemin Soi 9<br>Chiang Mai 50200</p><p>hello@halden.co</p>' },
+} satisfies Meta<typeof InFooter>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390 accordion row', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/layout/group/Group.cases.tsx

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { Group, type GroupBlock, type GroupProps } from '../../../../../src/sections/Group/Group'
+import { groupSchema } from '../../../../../src/sections/Group/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+import { placeholderImage } from '../../../../../src/components/states/media/MediaPlaceholder'
+import * as fx from '../../../../fixtures/index'
+
+const preset = (name: string) => resolveSettings(groupSchema, presetsFor('group').find((p) => p.name === name)!.settings).settings
+const linen = placeholderImage('editorial', 1200, 900, 'Linen drying on a line')
+
+const split: GroupBlock[] = [
+  { type: 'heading', settings: { eyebrow: 'Care guide', text: 'Linen gets better every time you wash it.', size: 'large' } },
+  { type: 'text', settings: { text: 'Wash cool, line dry, skip the iron. Flax softens with every wash and grows stronger when wet.', size: 'large', muted: true } },
+  { type: 'button', settings: { label: 'Read the guide', link: '/blogs/journal/how-to-wash-linen' } },
+  { type: 'button', settings: { label: 'Shop linen', link: '/collections/table-linen', variant: 'link' } },
+  { type: 'image', settings: { ratio: 'editorial' }, image: linen },
+]
+
+const base: GroupProps = { ...defaultsOf(groupSchema), blocks: split, shop: fx.shop }
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Group',
+  component: Group,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Group>
+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 }}>
+      {[PresetTextAndImage, PresetStatement, PresetThreePoints, PresetMediaLead].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) => <Group {...a} />))({ ...args, ...s.args } as typeof args, ctx)}
+        </section>
+      ))}
+    </div>
+  ),
+}
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+export const Playground: Story = { name: 'Playground' }
+export const PresetTextAndImage: Story = { name: 'Preset · Text and image', args: { ...preset('group-split') } }
+export const PresetStatement: Story = {
+  name: 'Preset · Statement',
+  args: {
+    ...preset('group-statement'),
+    blocks: [
+      { type: 'heading', settings: { eyebrow: 'Our promise', text: 'Fewer, better things for the rooms you use most.', size: 'medium' } },
+      { type: 'button', settings: { label: 'Our story', link: '/pages/about', variant: 'secondary' } },
+    ],
+  },
+}
+export const PresetThreePoints: Story = {
+  name: 'Preset · Three points',
+  args: {
+    ...preset('group-three-points'),
+    blocks: [
+      { type: 'icon', settings: { icon: 'leaf', size: 20 } },
+      { type: 'heading', settings: { text: 'Small batches', size: 'small', level: 'h3' } },
+      { type: 'text', settings: { text: 'Forty pieces per glaze run.', size: 'small', muted: true } },
+      { type: 'icon', settings: { icon: 'shield', size: 20 } },
+      { type: 'heading', settings: { text: 'Honest materials', size: 'small', level: 'h3' } },
+      { type: 'text', settings: { text: 'Origins listed on every product.', size: 'small', muted: true } },
+      { type: 'icon', settings: { icon: 'return', size: 20 } },
+      { type: 'heading', settings: { text: 'Repair, not replace', size: 'small', level: 'h3' } },
+      { type: 'text', settings: { text: 'Re-glazed free in year one.', size: 'small', muted: true } },
+    ],
+  },
+  parameters: { docs: { description: { story: 'icon · heading · text × 3 → three cells (a repeating icon starts a new column).' } } },
+}
+export const PresetMediaLead: Story = {
+  name: 'Preset · Media lead',
+  args: {
+    ...preset('group-media-lead'),
+    background: 'surface',
+    blocks: [
+      { type: 'heading', settings: { text: 'Glazed by hand, forty at a time.', size: 'medium' } },
+      { type: 'text', settings: { text: 'Our two-kiln studio outside Chiang Mai.', muted: true } },
+      { type: 'image', settings: { ratio: 'editorial' }, image: placeholderImage('store', 1200, 900, 'The studio') },
+    ],
+  },
+}
+
+export const WideStart: Story = { name: 'Layout · columnRatio · wide-start', args: { columnRatio: 'wide-start' } }
+export const WideEnd: Story = { name: 'Layout · columnRatio · wide-end', args: { columnRatio: 'wide-end' } }
+export const AlignStart: Story = { name: 'Layout · verticalAlign · start', args: { verticalAlign: 'start' } }
+export const GapSmall: Story = { name: 'Layout · innerGap · small', args: { innerGap: 'small' } }
+export const OneColumnNarrowCenter: Story = { name: 'Layout · columns 1 · contentWidth narrow · center', args: { columns: 1, contentWidth: 'narrow', contentAlignment: 'center', blocks: split.slice(0, 3) } }
+export const FourColumns: Story = {
+  name: 'Layout · columns 4 · icon row (→ 2 at 390)',
+  args: {
+    columns: 4,
+    verticalAlign: 'start',
+    background: 'surface',
+    blocks: (['truck', 'return', 'chat', 'gift'] as const).flatMap((icon, i) => [
+      { type: 'icon' as const, settings: { icon, size: 24 } },
+      { type: 'heading' as const, settings: { text: ['Tracked delivery', 'Easy returns', 'Real people', 'Gift wrapping'][i], size: 'small' as const, level: 'h3' as const } },
+    ]),
+  },
+}
+export const BackgroundInverse: Story = { name: 'Option · background · primary (inverse)', args: { background: 'primary' } }
+export const SectionWidthStandard: Story = { name: 'Layout · sectionWidth · standard', args: { sectionWidth: 'standard' } }
+export const SectionWidthFull: Story = { name: 'Layout · sectionWidth · full', args: { sectionWidth: 'full' } }
+export const SpacingNone: Story = { name: 'Layout · spacingTop/Bottom · none', args: { spacingTop: 'none', spacingBottom: 'none' } }
+export const SpacingXl: Story = { name: 'Layout · spacingTop/Bottom · xl', args: { spacingTop: 'xl', spacingBottom: 'xl' } }
+export const HeaderSizeLarge: Story = { name: 'Option · headerSize · large (heading blocks default)', args: { headerSize: 'large', blocks: split.map((b) => (b.type === 'heading' ? { ...b, settings: { ...b.settings, size: undefined } } : b)) } }
+export const TwoPrimariesDemoted: Story = {
+  name: 'State · Guardrail · second primary renders secondary',
+  args: { blocks: [split[0], { type: 'button', settings: { label: 'Read the guide', link: '/blogs/journal' } }, { type: 'button', settings: { label: 'Shop linen', link: '/collections/table-linen' } }, split[4]] },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await expect(c.getByRole('link', { name: 'Shop linen' })).toHaveAttribute('data-variant', 'secondary')
+  },
+}
+export const AllBlocks: Story = {
+  name: 'Layout · Blocks · every accepted block',
+  args: {
+    columns: 2,
+    background: 'surface',
+    blocks: [
+      { type: 'heading', settings: { eyebrow: 'Eyebrow', text: 'Heading block' } },
+      { type: 'text', settings: { text: '<p>Text block with an <a href="#">inline link</a>.</p>' } },
+      { type: 'button', settings: { label: 'Button', link: '#' } },
+      { type: 'button', settings: { label: 'Soft', link: '#', variant: 'ghost' } },
+      { type: 'spacer', settings: { height: 24 } },
+      { type: 'jumbo-text', settings: { text: 'Made to last.', align: 'left' } },
+      { type: 'accordion', settings: { heading: 'Dishwasher', body: 'Safe unless the rim is gold.' } },
+      { type: 'accordion', settings: { heading: 'Microwave & oven', body: 'Microwave safe; oven to 200°C.' } },
+      { type: 'social-links' },
+      { type: 'payment-icons' },
+      { type: 'newsletter-signup', settings: { heading: 'Letters from the studio', body: 'Once a month.', buttonUrl: '#', buttonLabel: 'Subscribe' } },
+      { type: 'image', settings: { ratio: 'square', caption: 'Image with caption' }, image: placeholderImage('product', 800, 800, 'Mug') },
+    ],
+  },
+}
+export const StressLongHeading: Story = {
+  name: 'Stress · long heading · unequal content · start',
+  args: {
+    background: 'surface',
+    verticalAlign: 'start',
+    blocks: [
+      { type: 'heading', settings: { text: 'Everything you need to know about caring for hand-thrown stoneware at home', size: 'small' } },
+      { type: 'text', settings: { text: 'Dishwasher and microwave safe unless the rim is gold. Reactive glazes darken slightly over years of machine washing.', size: 'small', muted: true } },
+      { type: 'accordion', settings: { heading: 'Dishwasher', body: 'Top rack preferred.' } },
+      { type: 'accordion', settings: { heading: 'Microwave & oven', body: 'Up to 200°C.' } },
+      { type: 'accordion', settings: { heading: 'Chips & repairs', body: 'We re-glaze free in year one.' } },
+    ],
+  },
+}
+export const NoMedia: Story = { name: 'State · No media · image block without image collapses', args: { blocks: [...split.slice(0, 4), { type: 'image', image: null }] } }
+export const NoMediaEditor: Story = { name: 'State · No media · editor shows image setup frame', args: { blocks: [...split.slice(0, 4), { type: 'image', image: null }] }, parameters: { nova: { mode: 'editor' } } }
+export const PortraitImage: Story = { name: 'Option · Media · portrait image, natural ratio', args: { blocks: [...split.slice(0, 4), { type: 'image', image: fx.stress.portraitImage }] } }
+export const Empty: Story = { name: 'State · Empty · storefront renders nothing', args: { blocks: [] } }
+export const EmptyEditor: Story = { name: 'State · Empty · editor drop zone', args: { blocks: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · mobileOrder default', globals: mobile }
+export const MobileReverse: Story = { name: 'Responsive · 390 · mobileOrder reverse (media first)', globals: mobile, args: { ...PresetMediaLead.args } }
+export const Thai: Story = {
+  name: 'Stress · Thai',
+  args: { blocks: [{ type: 'heading', settings: { eyebrow: 'วิธีดูแล', text: 'ผ้าลินินยิ่งซักยิ่งนุ่ม' } }, { type: 'text', settings: { text: 'ซักน้ำเย็น ตากในที่ร่ม ไม่ต้องรีด เส้นใยลินินจะนุ่มขึ้นทุกครั้งที่ซัก', muted: true } }, { type: 'button', settings: { label: 'อ่านวิธีดูแล', link: '#' } }, { type: 'image', image: linen }] },
+  parameters: { nova: { locale: 'th' } },
+}
+export const Arabic: Story = { name: 'Stress · RTL · Arabic', args: { blocks: [{ type: 'heading', settings: { text: 'الكتان يتحسن مع كل غسلة' } }, { type: 'text', settings: { text: 'اغسل بماء بارد وجفف على الحبل.' } }, { type: 'button', settings: { label: 'اقرأ الدليل', link: '#' } }, { type: 'image', image: linen }] }, parameters: { nova: { locale: 'ar' } } }
+export const LegacyHideOnMobile: Story = { name: 'Option · hideOnMobile · on (hidden < 640)', args: { hideOnMobile: true }, globals: mobile }
+export const Anchor: Story = { name: 'Option · anchorId', args: { anchorId: 'care-guide' }, play: async ({ canvasElement }) => expect(canvasElement.querySelector('#care-guide')).not.toBeNull() }
+
+export const InteractionAccordion: Story = {
+  name: 'Accessibility · accordion blocks (keyboard)',
+  args: { ...StressLongHeading.args },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const row = c.getByRole('button', { name: 'Dishwasher' })
+    row.focus()
+    await userEvent.keyboard('{Enter}')
+    await expect(row).toHaveAttribute('aria-expanded', 'true')
+    await waitFor(() => expect(c.getByText('Top rack preferred.')).toBeVisible())
+    await userEvent.keyboard(' ')
+    await expect(row).toHaveAttribute('aria-expanded', 'false')
+  },
+}

package/templates/nova/tests/cases/sections/layout/group/blocks/Accordion.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { AccordionBlock, accordionSchema, type AccordionBlockProps } from '../../../../../../src/sections/Group/blocks/Accordion'
+import { blockFrame, blockPlayground } from '../../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Blocks/Accordion',
+  component: AccordionBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(accordionSchema), heading: 'Dishwasher', body: 'Safe unless the rim is gold.' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof AccordionBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div>{['Dishwasher', 'Microwave & oven', 'Chips & repairs'].map((h, i) => <AccordionBlock key={h} heading={h} body="Top rack preferred." open={i === 0} />)}</div> }
+export const Playground: Story = blockPlayground<AccordionBlockProps>(accordionSchema) as Story

package/templates/nova/tests/cases/sections/layout/group/blocks/JumboText.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { JumboTextBlock, jumboTextSchema, type JumboTextBlockProps } from '../../../../../../src/sections/Group/blocks/JumboText'
+import { blockFrame, blockPlayground } from '../../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Blocks/JumboText',
+  component: JumboTextBlock,
+  tags: ['autodocs'],
+  args: defaultsOf(jumboTextSchema),
+  decorators: [blockFrame],
+} satisfies Meta<typeof JumboTextBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = blockPlayground<JumboTextBlockProps>(jumboTextSchema) as Story
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/layout/group/blocks/Spacer.cases.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { SpacerBlock, spacerSchema, type SpacerBlockProps } from '../../../../../../src/sections/Group/blocks/Spacer'
+import { TextBlock } from '../../../../../../src/components/content/blocks/Text'
+import { blockFrame, blockPlayground } from '../../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Blocks/Spacer',
+  component: SpacerBlock,
+  tags: ['autodocs'],
+  args: defaultsOf(spacerSchema),
+  decorators: [blockFrame, (S) => <div style={{ outline: '1px dashed var(--color-border-input)' }}><S /></div>],
+} satisfies Meta<typeof SpacerBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** The spacer is invisible by design; here the space it adds between two blocks is tinted and measured. */
+export const InContext: Story = {
+  ...(blockPlayground<SpacerBlockProps>(spacerSchema) as Story),
+  name: 'Usage · space between two text blocks',
+  render: (a) => (
+    <div>
+      <TextBlock text="<p>Every piece is thrown and glazed by hand in our Chiang Mai studio.</p>" size="body" muted={false} align="inherit" />
+      <div style={{ position: 'relative' }}>
+        <SpacerBlock {...a} />
+        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'var(--color-info-surface)', borderBlock: '1px dashed var(--color-info)' }} />
+        <span style={{ position: 'absolute', insetInlineEnd: 0, top: '50%', transform: 'translateY(-50%)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-info)', background: 'var(--color-bg)', padding: '0 4px' }}>height {a.height}</span>
+      </div>
+      <TextBlock text="<p>Small variations in colour and form are part of each piece.</p>" size="body" muted={false} align="inherit" />
+    </div>
+  ),
+}
+export const Playground: Story = blockPlayground<SpacerBlockProps>(spacerSchema) as Story