create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/sections/content/image-gallery/ImageGallery.cases.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { ImageGallery, type ImageGalleryProps } from '../../../../../src/sections/ImageGallery/ImageGallery'
+import { imageGallerySchema } from '../../../../../src/sections/ImageGallery/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+import * as fx from '../../../../fixtures/index'
+
+const base: ImageGalleryProps = { ...defaultsOf(imageGallerySchema), blocks: sc.storyGallery }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/ImageGallery',
+  component: ImageGallery,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ImageGallery>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(imageGallerySchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetBento, PresetThree, PresetCarousel]} render={(x) => <ImageGallery {...x} />} /> }
+export const Playground: Story = {}
+export const PresetBento: Story = { name: 'Preset · Bento', args: preset('gal-bento') }
+export const PresetThree: Story = { name: 'Preset · 3-up', args: { ...preset('gal-three'), blocks: sc.storyGallery.slice(0, 3) } }
+export const PresetCarousel: Story = { name: 'Preset · Carousel · lightbox', args: preset('gal-carousel') }
+export const Video: Story = { name: 'Option · a video item (click to play)', args: { preset: '3-up', blocks: [{ type: 'video', settings: {}, video: fx.studioVideo, poster: fx.heroEditorial }, ...sc.storyGallery.slice(1, 3)] } }
+export const Three: Story = { name: 'State · bento with 3 images → 1 + 2', args: { blocks: sc.storyGallery.slice(0, 3) } }
+export const One: Story = { name: 'State · 1 image → full width', args: { blocks: sc.storyGallery.slice(0, 1) } }
+export const Mobile: Story = { name: 'Responsive · 390 · swipe + counter', globals: mobile }

package/templates/nova/tests/cases/sections/content/image-with-text/ImageWithText.cases.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { ImageWithText, type ImageWithTextProps } from '../../../../../src/sections/ImageWithText/ImageWithText'
+import { imageWithTextSchema } from '../../../../../src/sections/ImageWithText/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+import * as fx from '../../../../fixtures/index'
+
+const base: ImageWithTextProps = { ...defaultsOf(imageWithTextSchema), image: sc.storyImage, imageAlt: 'A potter glazing a bowl', eyebrow: 'From the studio', heading: 'Glazed by hand, forty pieces at a time.', body: 'Our stoneware is thrown and glazed in a two-kiln studio outside Chiang Mai. Each speckle is iron from the local clay, so no two mugs are the same.', buttonLabel: 'Meet the makers', buttonLink: '/pages/makers' }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/ImageWithText',
+  component: ImageWithText,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ImageWithText>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(imageWithTextSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStory, PresetOverlap, PresetDetail, PresetPanel]} render={(x) => <ImageWithText {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStory: Story = { name: 'Preset · Story', args: preset('iwt-story') }
+export const PresetOverlap: Story = { name: 'Preset · Editorial overlap', args: preset('iwt-editorial-overlap') }
+export const PresetDetail: Story = { name: 'Preset · Detail close-up', args: preset('iwt-product-detail') }
+export const PresetPanel: Story = { name: 'Preset · Muted panel', args: preset('iwt-panel') }
+export const Top: Story = { name: 'Option · contentVerticalAlign · top', args: { contentVerticalAlign: 'top', mediaRatio: 'square' } }
+export const Video: Story = { name: 'Option · video (NEW) · poster = image', args: { video: fx.studioVideo, image: fx.heroEditorial, mediaRatio: 'landscape' } }
+export const NoImage: Story = { name: 'State · no image → text only', args: { image: null } }
+export const Arabic: Story = { name: 'Stress · RTL · end → image flips', args: { mediaPosition: 'end', heading: 'مزجج يدويًا، أربعون قطعة في كل مرة.', eyebrow: 'من المرسم', body: 'يُشكَّل خزفنا ويُزجَّج في مرسم بفرنين خارج شيانغ ماي.' }, parameters: { nova: { locale: 'ar' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · image first · 4:5', globals: mobile }
+export const MobileAfter: Story = { name: 'Responsive · 390 · mobileMediaPosition after', globals: mobile, args: { mobileMediaPosition: 'after' } }
+export const LegacyRight: Story = { name: 'Legacy · mediaPosition right → end (physical in RTL)', args: { ...resolveSettings(imageWithTextSchema, { mediaPosition: 'right' }).settings, image: sc.storyImage, heading: 'Glazed by hand.', physicalSide: 'right' } }

package/templates/nova/tests/cases/sections/content/multicolumn/Multicolumn.cases.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, within } from '../../../../support/case'
+import { Multicolumn, type MulticolumnProps } from '../../../../../src/sections/Multicolumn/Multicolumn'
+import { multicolumnSchema } from '../../../../../src/sections/Multicolumn/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: MulticolumnProps = { ...defaultsOf(multicolumnSchema), eyebrow: 'Why Halden', heading: 'Made to be used every day.', items: sc.storyColumns }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/Multicolumn',
+  component: Multicolumn,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Multicolumn>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(multicolumnSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetReasons, PresetIcons]} render={(x) => <Multicolumn {...x} />} /> }
+export const Playground: Story = {}
+export const PresetReasons: Story = { name: 'Preset · Reasons', args: preset('mc-reasons') }
+export const PresetIcons: Story = { name: 'Preset · Icons', args: { ...preset('mc-icons'), heading: '', eyebrow: '', items: sc.storyIconColumns } }
+export const Square: Story = { name: 'Option · imageRatio · square', args: { imageRatio: 'square' } }
+export const Plain: Story = { name: 'Option · style · plain', args: { style: 'plain' } }
+export const Empty: Story = { name: 'State · no columns · editor setup', args: { items: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · image-left rows', globals: mobile }
+export const MobileCarousel: Story = { name: 'Responsive · 390 · carouselOnMobile', globals: mobile, args: { carouselOnMobile: true } }
+export const LegacySubheading: Story = { name: 'Legacy · subheading → eyebrow', args: { ...resolveSettings(multicolumnSchema, { subheading: 'Why Halden', heading: 'Made to be used every day.' }).settings, items: sc.storyColumns }, play: async ({ canvasElement }) => expect(within(canvasElement).getByText('Why Halden')).toBeInTheDocument() }

package/templates/nova/tests/cases/sections/content/page-body/PageBody.cases.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, within } from '../../../../support/case'
+import { PageBody, type PageBodyProps } from '../../../../../src/sections/PageBody/PageBody'
+import { pageBodySchema } from '../../../../../src/sections/PageBody/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import * as sc from '../../../../support/story-content'
+
+const base: PageBodyProps = { ...defaultsOf(pageBodySchema), page: { title: 'Care guide', html: sc.storyArticleHtml } }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/PageBody',
+  component: PageBody,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof PageBody>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(pageBodySchema, name)
+
+export const Overview: Story = { args: preset('page-standard') }
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Standard', args: preset('page-standard') }
+export const HiddenTitle: Story = { name: 'Option · showTitle off → the h1 is visually hidden', args: { showTitle: false }, play: async ({ canvasElement }) => expect(within(canvasElement).getByRole('heading', { level: 1 })).toHaveTextContent('Care guide') }
+export const Content: Story = { name: 'Option · contentWidth · content (960)', args: { contentWidth: 'content' } }
+export const Editor: Story = { name: 'State · no page · editor sample', args: { page: null }, parameters: { nova: { mode: 'editor' } } }
+export const Thai: Story = { name: 'Stress · Thai · 17 / 1.85', args: { page: { title: 'วิธีซักผ้าลินิน', html: '<p>ความร้อนและน้ำยาปรับผ้านุ่มคือศัตรูเพียงอย่างเดียวของผ้าลินิน ซักที่ 40 องศาด้วยผงซักฟอกสูตรอ่อนโยน</p><h2>สี่ขั้นตอน</h2><ol><li>กลับด้านปลอกผ้า</li><li>ซักน้ำเย็น</li></ol>' } }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · Arabic', args: { page: { title: 'غسل الكتان', html: '<p>الحرارة ومنعّم الأقمشة هما العدوان الوحيدان للكتان.</p><blockquote>«الكتان يتحسن مع الاستخدام.»</blockquote>' } }, parameters: { nova: { locale: 'ar' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · tables scroll', globals: mobile }
+export const LegacyTextWidth: Story = { name: 'Legacy · textWidth content keeps rendering', args: { ...resolveSettings(pageBodySchema, { textWidth: 'content' }).settings, page: { title: 'Care guide', html: sc.storyArticleHtml } } }

package/templates/nova/tests/cases/sections/content/rich-text/RichTextSection.cases.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, within } from '../../../../support/case'
+import { RichTextSection, type RichTextSectionProps } from '../../../../../src/sections/RichText/RichText'
+import { richTextSchema } from '../../../../../src/sections/RichText/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+
+const base: RichTextSectionProps = { ...defaultsOf(richTextSchema), eyebrow: 'Our promise', heading: 'Fewer, better things for the rooms you use most.', body: 'Every piece is made in batches of forty or fewer, from materials that age well — European flax, FSC walnut and lead-free stoneware. When something chips in the first year, we fix it.', buttonLabel: 'Our story', buttonLink: '/pages/about' }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/RichTextSection',
+  component: RichTextSection,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof RichTextSection>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(richTextSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStatement, PresetSplit, PresetNote]} render={(x) => <RichTextSection {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStatement: Story = { name: 'Preset · Brand statement', args: preset('rt-statement') }
+export const PresetSplit: Story = { name: 'Preset · Intro split', args: { ...preset('rt-intro-split'), eyebrow: '', heading: 'Why we made it', body: "Every autumn we fire one new glaze. This year it's Sea Salt — a pale speckled grey that shifts with the light.", buttonLabel: '' } }
+export const PresetNote: Story = { name: 'Preset · Muted note', args: { ...preset('rt-note'), eyebrow: '', heading: 'Care for linen', body: 'Wash cool, line dry, skip the iron. Flax softens with every wash and grows stronger when wet.', buttonLabel: 'Read the care guide', buttonLink: '/pages/care' } }
+export const Primary: Story = { name: 'Option · buttonVariant · primary', args: { buttonVariant: 'primary' } }
+export const Content: Story = { name: 'Option · contentWidth · content (72ch)', args: { contentWidth: 'content', contentAlignment: 'left' } }
+export const H1: Story = { name: 'Accessibility · headingSize h1 is the page h1', args: { headingSize: 'h1' }, play: async ({ canvasElement }) => expect(within(canvasElement).getByRole('heading', { level: 1 })).toBeInTheDocument() }
+export const Empty: Story = { name: 'State · empty → nothing', args: { heading: '', eyebrow: '', body: '' } }
+export const Thai: Story = { name: 'Stress · Thai', args: { eyebrow: 'คำสัญญาของเรา', heading: 'ของน้อยชิ้นแต่ดีกว่า สำหรับห้องที่คุณใช้มากที่สุด', body: 'ทุกชิ้นทำเป็นล็อตละไม่เกินสี่สิบชิ้น จากวัสดุที่ยิ่งใช้ยิ่งสวย' }, parameters: { nova: { locale: 'th' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · long body start-aligned · full-width button', globals: mobile }
+export const LegacyWidth: Story = { name: 'Legacy · width content keeps rendering', args: { ...resolveSettings(richTextSchema, { width: 'content', heading: 'Legacy width', body: 'A saved width wins over the new contentWidth so the store does not change.' }).settings } }

package/templates/nova/tests/cases/sections/content/team-founders/TeamFounders.cases.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { TeamFounders, type TeamFoundersProps } from '../../../../../src/sections/TeamFounders/TeamFounders'
+import { teamFoundersSchema } from '../../../../../src/sections/TeamFounders/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: TeamFoundersProps = { ...defaultsOf(teamFoundersSchema), eyebrow: 'Our founder', heading: 'The studio', people: sc.storyPeople }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/TeamFounders',
+  component: TeamFounders,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof TeamFounders>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(teamFoundersSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetFounder, PresetGrid, PresetList]} render={(x) => <TeamFounders {...x} />} /> }
+export const Playground: Story = {}
+export const PresetFounder: Story = { name: 'Preset · Founder story', args: preset('team-founder') }
+export const PresetGrid: Story = { name: 'Preset · Team grid', args: { ...preset('team-grid'), eyebrow: '' } }
+export const PresetList: Story = { name: 'Preset · Team list', args: { ...preset('team-list'), eyebrow: '', heading: '' } }
+export const Bios: Story = { name: 'Option · showBio (grid)', args: { layout: 'grid', showBio: true, eyebrow: '' } }
+export const End: Story = { name: 'Option · mediaPosition · end', args: { mediaPosition: 'end' } }
+export const Empty: Story = { name: 'State · no people · editor setup', args: { people: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · founder stacked', globals: mobile }
+export const MobileGrid: Story = { name: 'Responsive · 390 · grid 2 columns', globals: mobile, args: { layout: 'grid', eyebrow: '' } }

package/templates/nova/tests/cases/sections/content/team-founders/blocks/Person.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { TeamFounders } from '../../../../../../src/sections/TeamFounders/TeamFounders'
+import { teamFoundersSchema } from '../../../../../../src/sections/TeamFounders/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Content/Blocks/Person',
+  component: TeamFounders,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(teamFoundersSchema), layout: 'grid', columns: 4, showBio: true, eyebrow: '', heading: '', people: sc.storyPeople.slice(1, 2) },
+} satisfies Meta<typeof TeamFounders>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const NoPortrait: Story = { name: 'State · no portrait → initials', args: { people: [{ ...sc.storyPeople[1], image: null }] } }
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/content/timeline/Timeline.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { Timeline, type TimelineProps } from '../../../../../src/sections/Timeline/Timeline'
+import { timelineSchema } from '../../../../../src/sections/Timeline/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: TimelineProps = { ...defaultsOf(timelineSchema), heading: 'From clay to your table', steps: sc.storySteps }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/Timeline',
+  component: Timeline,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Timeline>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(timelineSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetProcess, PresetHistory]} render={(x) => <Timeline {...x} />} /> }
+export const Playground: Story = {}
+export const PresetProcess: Story = { name: 'Preset · Process', args: preset('tl-process') }
+export const PresetHistory: Story = { name: 'Preset · History · images', args: preset('tl-history') }
+export const Empty: Story = { name: 'State · no steps · editor', args: { steps: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · vertical', globals: mobile }

package/templates/nova/tests/cases/sections/content/timeline/blocks/Step.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { Timeline } from '../../../../../../src/sections/Timeline/Timeline'
+import { timelineSchema } from '../../../../../../src/sections/Timeline/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Content/Blocks/Step',
+  component: Timeline,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(timelineSchema), columns: 3, steps: sc.storySteps.slice(0, 1) },
+} satisfies Meta<typeof Timeline>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/layout/announcement-bar/AnnouncementBar.cases.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { AnnouncementBar } from '../../../../../src/sections/AnnouncementBar/AnnouncementBar'
+import { announcementBarSchema } from '../../../../../src/sections/AnnouncementBar/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+import { stress } from '../../../../fixtures/index'
+
+const preset = (name: string) => resolveSettings(announcementBarSchema, presetsFor('announcement-bar').find((p) => p.name === name)!.settings).settings
+
+const one = { text: 'Free carbon-neutral shipping over ฿4,000', link: '/policies/shipping-policy' }
+const three = {
+  text: 'New Sea Salt glaze, back in stock · Shop now',
+  link: '/collections/sea-salt',
+  text2: 'Visit our new Bangkok studio at Siam Discovery · Directions',
+  link2: '/pages/bangkok',
+  text3: 'Gift wrapping on every order this month',
+  link3: '',
+}
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/AnnouncementBar',
+  component: AnnouncementBar,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(announcementBarSchema), ...one, storageKey: 'lab' },
+} satisfies Meta<typeof AnnouncementBar>
+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 }}>
+      {[PresetShipping, PresetRotating, PresetSale, Brand, LongMessage].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) => <AnnouncementBar {...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 PresetShipping: Story = { name: 'Preset · Shipping promise', args: { ...preset('announcement-shipping'), ...one } }
+export const PresetRotating: Story = { name: 'Preset · Rotating offers', args: { ...preset('announcement-rotating'), ...three } }
+export const PresetSale: Story = { name: 'Preset · Sale alert', args: { ...preset('announcement-sale'), text: 'Autumn sale — up to 30% off linen until Sunday' } }
+
+export const Inverse: Story = { name: 'Option · background · inverse', args: { background: 'inverse' } }
+export const Brand: Story = { name: 'Option · background · brand #0F5C4D · auto contrast', args: { background: 'brand', brandColor: '#0F5C4D', text: 'Visit our new Bangkok studio at Siam Discovery · Directions', link: '/pages/bangkok' }, parameters: { nova: { theme: { colorPrimary: '#0F5C4D' } } } }
+export const BrandPale: Story = { name: 'Option · background · brand pale #E8C547 → ink text', args: { background: 'brand', brandColor: '#E8C547' }, parameters: { nova: { theme: { colorPrimary: '#E8C547' } } } }
+export const ArrowsNoRotation: Story = { name: 'Option · showArrows · without rotation', args: { ...three } }
+export const RotatingWithPause: Story = { name: 'Option · rotation · on · pause control', args: { ...three, rotation: true } }
+export const Dismissible: Story = { name: 'Option · dismissible', args: { dismissible: true, background: 'inverse', text: 'Autumn sale — up to 30% off linen until Sunday', link: '' } }
+export const NoLink: Story = { name: 'Option · Message without link', args: { link: '' } }
+export const LongMessage: Story = { name: 'Stress · long message wraps, never truncates', args: { text: stress.longText, link: '/policies/shipping-policy' } }
+export const Thai: Story = { name: 'Stress · Thai', args: { text: stress.thaiText, background: 'inverse', dismissible: true, link: '' }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · Arabic', args: { ...three, text: stress.arabicText }, parameters: { nova: { locale: 'ar' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · wraps to 2 lines · arrows kept', globals: mobile, args: { ...three, text: 'New glazes are here — shop Sea Salt & Iron before they sell out', link: '/collections/new' } }
+export const MobileThaiInverse: Story = { name: 'Responsive · 390 · Thai · inverse · dismissible', globals: mobile, args: { text: stress.thaiText, link: '', background: 'inverse', dismissible: true }, parameters: { nova: { locale: 'th' } } }
+export const Empty: Story = { name: 'State · Empty · storefront renders nothing', args: { text: '', link: '' } }
+export const EmptyEditor: Story = { name: 'State · Empty · editor setup frame', args: { text: '', link: '' }, parameters: { nova: { mode: 'editor' } } }
+export const DarkScheme: Story = { name: 'Stress · Dark scheme', parameters: { nova: { scheme: 'dark' } } }
+
+export const LegacySurfaceSecondary: Story = {
+  name: 'Legacy · background surface-secondary → muted',
+  args: { ...resolveSettings(announcementBarSchema, { ...one, background: 'surface-secondary' }).settings },
+  play: async ({ canvasElement }) => expect(canvasElement.querySelector('.nv-announcement')).toHaveAttribute('data-bg', 'muted'),
+}
+export const LegacyPrimary: Story = {
+  name: 'Legacy · background primary → brand',
+  args: { ...resolveSettings(announcementBarSchema, { ...one, background: 'primary' }).settings },
+  play: async ({ canvasElement }) => expect(canvasElement.querySelector('.nv-announcement')).toHaveAttribute('data-bg', 'brand'),
+}
+
+export const InteractionArrows: Story = {
+  name: 'Accessibility · arrows cycle messages',
+  args: { ...three },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await waitFor(() => expect(c.getByText(/New Sea Salt glaze/)).toBeVisible())
+    await userEvent.click(c.getByRole('button', { name: 'Next' }))
+    await waitFor(() => expect(c.getByText(/Bangkok studio/)).toBeVisible())
+    await userEvent.click(c.getByRole('button', { name: 'Previous' }))
+    await userEvent.click(c.getByRole('button', { name: 'Previous' }))
+    await waitFor(() => expect(c.getByText(/Gift wrapping/)).toBeVisible())
+  },
+}
+export const InteractionPause: Story = {
+  name: 'Accessibility · pause is always offered when rotating (WCAG 2.2.2)',
+  args: { ...three, rotation: true },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const pause = c.getByRole('button', { name: 'Pause' })
+    await userEvent.click(pause)
+    await expect(c.getByRole('button', { name: 'Play' })).toHaveAttribute('aria-pressed', 'true')
+  },
+}
+export const ReducedMotionNoRotation: Story = {
+  name: 'Accessibility · Reduced motion · rotation off, arrows still work',
+  args: { ...three, rotation: true },
+  parameters: { nova: { motion: 'reduced' } },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await waitFor(() => expect(c.queryByRole('button', { name: 'Pause' })).toBeNull())
+    await userEvent.click(c.getByRole('button', { name: 'Next' }))
+    await waitFor(() => expect(c.getByText(/Bangkok studio/)).toBeVisible())
+  },
+}
+export const InteractionDismiss: Story = {
+  name: 'Accessibility · dismiss (session)',
+  args: { dismissible: true, storageKey: `lab-dismiss-${Math.random().toString(36).slice(2)}` },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Dismiss' }))
+    await waitFor(() => expect(canvasElement.querySelector('.nv-announcement')).toBeNull())
+  },
+}

package/templates/nova/tests/cases/sections/layout/breadcrumbs/Breadcrumbs.cases.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, within } from '../../../../support/case'
+import { Breadcrumbs } from '../../../../../src/sections/Breadcrumbs/Breadcrumbs'
+import { breadcrumbsSchema } from '../../../../../src/sections/Breadcrumbs/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+import { trails } from '../../../../fixtures/index'
+
+const preset = resolveSettings(breadcrumbsSchema, presetsFor('breadcrumbs')[0].settings).settings
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(breadcrumbsSchema), items: trails.collection },
+} satisfies Meta<typeof Breadcrumbs>
+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 }}>
+      {[Playground, Product, LongTitleChevron, Muted].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) => <Breadcrumbs {...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 Preset: Story = { name: 'Preset · Breadcrumbs', args: { ...preset } }
+export const Product: Story = { name: 'Option · Product · came from a collection', args: { items: trails.product } }
+export const LongTitleChevron: Story = { name: 'Option · Long title · ellipsis at 40ch · separator ›', args: { items: trails.longTitle, separator: '›' } }
+export const Deep: Story = { name: 'Option · Deep trail', args: { items: trails.deep } }
+export const Muted: Story = { name: 'Option · background · surface-secondary (matches next section)', args: { items: trails.article, background: 'surface-secondary' } }
+export const Inverse: Story = { name: 'Option · background · primary', args: { background: 'primary' } }
+export const NoCurrent: Story = { name: 'Option · showCurrent · off', args: { showCurrent: false } }
+export const Standard: Story = { name: 'Layout · sectionWidth · standard', args: { sectionWidth: 'standard' } }
+export const Spacing: Story = { name: 'Layout · spacingTop medium · spacingBottom small', args: { spacingTop: 'medium', spacingBottom: 'small' } }
+export const Home: Story = { name: 'State · Home / 404 · renders nothing', args: { items: trails.home } }
+export const EditorSample: Story = { name: 'State · Editor · no route → sample trail + chip', args: { items: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · back link', globals: mobile, args: { items: trails.product } }
+export const MobileFull: Story = { name: 'Responsive · 390 · mobileStyle full · wraps', globals: mobile, args: { items: trails.product, mobileStyle: 'full' } }
+export const Thai: Story = { name: 'Stress · Thai', args: { items: trails.thai }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · chevron mirrors', args: { items: trails.arabic, separator: '›' }, parameters: { nova: { locale: 'ar' } } }
+export const ArabicMobile: Story = { name: 'Stress · RTL · 390 · back arrow mirrors', globals: mobile, args: { items: trails.arabic }, parameters: { nova: { locale: 'ar' } } }
+export const LegacyHideOnMobile: Story = {
+  name: 'Legacy · saved hideOnMobile true still hides < 640',
+  globals: mobile,
+  args: { ...resolveSettings(breadcrumbsSchema, { hideOnMobile: true }).settings, items: trails.product },
+}
+export const LegacyAnchor: Story = {
+  name: 'Legacy · saved anchorId still renders',
+  args: { ...resolveSettings(breadcrumbsSchema, { anchorId: 'trail' }).settings },
+  play: async ({ canvasElement }) => expect(canvasElement.querySelector('#trail')).not.toBeNull(),
+}
+export const Semantics: Story = {
+  name: 'Accessibility · aria-current + BreadcrumbList JSON-LD',
+  args: { items: trails.product, origin: 'https://halden.co' },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await expect(c.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument()
+    await expect(c.getByText('Washed Linen Duvet Cover — Queen, Oat').closest('.nv-breadcrumb__current')).toHaveAttribute('aria-current', 'page')
+    const ld = JSON.parse(canvasElement.querySelector('script[type="application/ld+json"]')!.textContent!)
+    await expect(ld.itemListElement).toHaveLength(3)
+    await expect(ld.itemListElement[0].item).toBe('https://halden.co/')
+  },
+}

package/templates/nova/tests/cases/sections/layout/divider/Divider.cases.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect } from '../../../../support/case'
+import { DividerSection } from '../../../../../src/sections/Divider/Divider'
+import { dividerSchema } from '../../../../../src/sections/Divider/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+
+const preset = (name: string) => resolveSettings(dividerSchema, presetsFor('divider').find((p) => p.name === name)!.settings).settings
+
+function Between({ children }: { children: React.ReactNode }) {
+  const block = { height: 72, margin: '0 auto', maxWidth: 'calc(var(--container-wide) + 2 * var(--page-gutter))', padding: '0 var(--page-gutter)' }
+  const fill = { height: '100%', borderRadius: 'var(--radius-md)', background: 'var(--color-bg-muted)' }
+  return (
+    <div style={{ padding: '24px 0' }}>
+      <div style={block}><div style={fill} /></div>
+      {children}
+      <div style={block}><div style={fill} /></div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/03 Sections/Layout/Divider',
+  component: DividerSection,
+  tags: ['autodocs'],
+  args: defaultsOf(dividerSchema),
+  render: (args) => (
+    <Between>
+      <DividerSection {...args} />
+    </Between>
+  ),
+} satisfies Meta<typeof DividerSection>
+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 }}>
+      {[PresetHairline, PresetChapter, PresetSpace].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) => <DividerSection {...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 PresetHairline: Story = { name: 'Preset · Hairline', args: { ...preset('divider-hairline') } }
+export const PresetChapter: Story = { name: 'Preset · Chapter break', args: { ...preset('divider-chapter'), label: 'Chapter two' } }
+export const PresetSpace: Story = { name: 'Preset · Breathing space', args: { ...preset('divider-space') } }
+export const Strong: Story = { name: 'Layout · style · line-strong · standard', args: { style: 'line-strong', width: 'standard' } }
+export const Full: Story = { name: 'Layout · width · full', args: { width: 'full' } }
+export const SpacingSm: Story = { name: 'Layout · spacing · sm', args: { spacing: 'sm' } }
+export const SpacingXl: Story = { name: 'Layout · spacing · xl', args: { spacing: 'xl' } }
+export const LabelIgnoredOnSpace: Story = {
+  name: 'State · label ignored when style is space',
+  args: { style: 'space', label: 'Chapter two' },
+  play: async ({ canvasElement }) => expect(canvasElement.textContent).not.toContain('Chapter two'),
+}
+export const LongLabel: Story = { name: 'Stress · long label (40ch cap)', args: { label: 'A considerably longer chapter label than the design recommends' } }
+export const Thai: Story = { name: 'Stress · Thai label', args: { label: 'บทที่สอง' }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · Arabic label', args: { label: 'الفصل الثاني' }, parameters: { nova: { locale: 'ar' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · chapter', globals: mobile, args: { label: 'Chapter two', width: 'standard', spacing: 'lg' } }
+export const Inverse: Story = { name: 'Stress · Dark scheme', parameters: { nova: { scheme: 'dark' } } }
+export const LegacyThickness2: Story = {
+  name: 'Legacy · thickness 2 still renders 2px',
+  tags: ['browser-only'],
+  args: { ...resolveSettings(dividerSchema, { thickness: '2' }).settings },
+  play: async ({ canvasElement }) => {
+    const line = canvasElement.querySelector<HTMLElement>('.nv-divider__line')!
+    await expect(getComputedStyle(line).height).toBe('2px')
+  },
+}
+export const LegacyThicknessNumber: Story = {
+  name: 'Legacy · thickness saved as number 2',
+  args: { ...resolveSettings(dividerSchema, { thickness: 2 }).settings },
+}