create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/tests/fixtures/shop.ts

@@ -0,0 +1,88 @@
+import { placeholderImage } from '../../src/components/states/media/MediaPlaceholder'
+import type { NovaCartSummary, NovaCustomer, NovaImage, NovaLocalization, NovaMarket, NovaShop } from '@tanqory/theme-kit'
+
+/**
+ * The design package draws every section with one demo store: Halden & Co.,
+ * stoneware, linen and pantry goods from Chiang Mai. Fixtures reuse it so the
+ * lab reads like the approved canvases. Starter-content rule: nothing here
+ * states a policy on a merchant's behalf except inside a clearly demo shop.
+ */
+
+/** A wordmark logo image (the "H&" mark + HALDEN), as the 12A brand-resolution A frame. */
+function logoMark(): NovaImage {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 32" width="132" height="32"><circle cx="16" cy="16" r="16" fill="#111"/><text x="16" y="20.5" font-family="Geist, Arial, sans-serif" font-size="12" font-weight="700" fill="#fff" text-anchor="middle">H&amp;</text><text x="44" y="21" font-family="Geist, Arial, sans-serif" font-size="14" font-weight="600" letter-spacing="3" fill="#111">HALDEN</text></svg>`
+  return { src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`, width: 132, height: 32, alt: 'Halden & Co.' }
+}
+
+function logoWide(): NovaImage {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 24" width="160" height="24"><rect width="24" height="24" rx="4" fill="#111"/><text x="32" y="11" font-family="Geist, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="2" fill="#111">NORTHERN</text><text x="32" y="21" font-family="Geist, Arial, sans-serif" font-size="6.5" letter-spacing="1.2" fill="#5E5E5C">LINEN &amp; STONEWARE</text></svg>`
+  return { src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`, width: 160, height: 24, alt: 'The Northern Linen & Stoneware Company' }
+}
+
+export const shop: NovaShop = {
+  name: 'Halden & Co.',
+  email: 'hello@halden.co',
+  phone: '+66 53 123 456',
+  social: {
+    instagram: 'https://instagram.com/halden.co',
+    facebook: 'https://facebook.com/halden.co',
+    x: 'https://x.com/haldenco',
+    tiktok: 'https://tiktok.com/@halden.co',
+  },
+  paymentMethods: ['visa', 'mastercard', 'amex', 'promptpay'],
+}
+
+export const shopWithLogo: NovaShop = { ...shop, logo: logoMark() }
+/** 12A brand resolution C: no logo image, no header text → the shop's legal name. */
+export const shopLegalName: NovaShop = { ...shop, name: 'Halden Studio Ltd' }
+export const shopLong: NovaShop = { ...shop, name: 'The Northern Linen & Stoneware Company' }
+export const shopLonger: NovaShop = { ...shop, name: 'The Northern Linen, Stoneware & Pantry Supply Company of Chiang Mai' }
+export const shopLongWithLogo: NovaShop = { ...shopLong, logo: logoWide() }
+export const shopThai: NovaShop = { ...shop, name: 'ฮัลเดน แอนด์ โค' }
+export const shopArabic: NovaShop = { ...shop, name: 'هالدن وشركاه' }
+export const shopMinimal: NovaShop = { name: 'Halden & Co.' }
+
+export const markets: NovaMarket[] = [
+  { countryCode: 'TH', country: 'Thailand', currencyCode: 'THB', currencySymbol: '฿', languageCode: 'en', language: 'English', languageEnglish: 'English' },
+  { countryCode: 'TH', country: 'ประเทศไทย', currencyCode: 'THB', currencySymbol: '฿', languageCode: 'th', language: 'ไทย', languageEnglish: 'Thai' },
+  { countryCode: 'SG', country: 'Singapore', currencyCode: 'SGD', currencySymbol: '$', languageCode: 'en', language: 'English', languageEnglish: 'English' },
+  { countryCode: 'JP', country: 'Japan', currencyCode: 'JPY', currencySymbol: '¥', languageCode: 'ja', language: '日本語', languageEnglish: 'Japanese' },
+  { countryCode: 'AE', country: 'تايلاند', currencyCode: 'THB', currencySymbol: '฿', languageCode: 'ar', language: 'العربية', languageEnglish: 'Arabic' },
+  { countryCode: 'JP', country: 'Japan', currencyCode: 'JPY', currencySymbol: '¥', languageCode: 'en', language: 'English', languageEnglish: 'English' },
+  { countryCode: 'GB', country: 'United Kingdom', currencyCode: 'GBP', currencySymbol: '£', languageCode: 'en', language: 'English', languageEnglish: 'English' },
+  { countryCode: 'US', country: 'United States', currencyCode: 'USD', currencySymbol: '$', languageCode: 'en', language: 'English', languageEnglish: 'English' },
+]
+
+/** The same store in each market's own script is not modelled here: country names are the store's display names. */
+const TH_LANGS: [string, string, string][] = [
+  ['en', 'English', 'English'],
+  ['th', 'ไทย', 'Thai'],
+  ['zh-Hans', '中文 (简体)', 'Chinese, Simplified'],
+  ['ja', '日本語', 'Japanese'],
+  ['ko', '한국어', 'Korean'],
+  ['ar', 'العربية', 'Arabic'],
+  ['fr', 'Français', 'French'],
+]
+
+/** 12A default: 4 countries; English + Thai + Japanese; Thai only in Thailand, Japanese only in Japan. */
+export const localization: NovaLocalization = { current: markets[0], available: [markets[0], markets[1], markets[3], markets[5], markets[2], markets[6], markets[7]] }
+/** Two languages → segmented control. */
+export const localizationTwoLanguages: NovaLocalization = { current: markets[0], available: [markets[0], markets[1], markets[2]] }
+/** 5+ languages → searchable language field (second step on phone). */
+export const localizationManyLanguages: NovaLocalization = {
+  current: markets[0],
+  available: [...TH_LANGS.map(([languageCode, language, languageEnglish]) => ({ ...markets[0], languageCode, language, languageEnglish })), markets[2], markets[5]],
+}
+export const localizationThai: NovaLocalization = { current: markets[1], available: [markets[0], markets[1], markets[3], markets[5], markets[2]] }
+export const localizationArabic: NovaLocalization = { current: markets[4], available: [markets[4], markets[0]] }
+/** One market only: the locale control has nothing to switch → hidden. */
+export const localizationSingle: NovaLocalization = { current: markets[0], available: [markets[0]] }
+
+export const cartSummary: NovaCartSummary = { itemCount: 2, lineCount: 2 }
+export const cartSummaryMany: NovaCartSummary = { itemCount: 128, lineCount: 9 }
+export const cartSummaryEmpty: NovaCartSummary = { itemCount: 0, lineCount: 0 }
+
+export const guest: NovaCustomer = { signedIn: false }
+export const customer: NovaCustomer = { signedIn: true, firstName: 'Mali' }
+
+export const heroImage = placeholderImage('hero', 1600, 900, 'Linen drying in the Chiang Mai studio')

package/templates/nova/tests/fixtures/stress.ts

@@ -0,0 +1,21 @@
+import { placeholderImage } from '../../src/components/states/media/MediaPlaceholder'
+import { makeProduct } from './commerce'
+
+/** Content that breaks naive layouts — every section story should survive these. */
+export const stress = {
+  longProductName: makeProduct({ handle: 'long', title: 'Extra-Large Hand-Thrown Speckled Stoneware Serving Platter with Reactive Sea Salt Glaze and Unglazed Foot Ring', price: 3490, type: 'Serving' }),
+  thaiProduct: makeProduct({ handle: 'thai', title: 'แก้วมัคเซรามิกเคลือบลายจุดทำมือจากเชียงใหม่', price: 690, type: 'แก้ว' }),
+  rtlProduct: makeProduct({ handle: 'rtl', title: 'كوب خزفي مرقط مصنوع يدويًا', price: 690, type: 'أكواب' }),
+  veryHighPrice: makeProduct({ handle: 'high', title: 'Studio Kiln Commission', price: 12_450_000, type: 'Commission' }),
+  sale: makeProduct({ handle: 'sale', title: 'Sea Salt Dinner Plate', price: 890, compareAt: 1190, type: 'Plates' }),
+  soldOut: makeProduct({ handle: 'sold-out', title: 'Hand-thrown Carafe', price: 1450, type: 'Drinkware', soldOut: true }),
+  missingImage: makeProduct({ handle: 'no-image', title: 'Wild Longan Honey', price: 420, type: 'Pantry', image: null, images: [] }),
+  portraitImage: placeholderImage('generic', 800, 1200, 'Portrait photo'),
+  landscapeImage: placeholderImage('generic', 1600, 900, 'Landscape photo'),
+  squareImage: placeholderImage('product', 1000, 1000, 'Square photo'),
+  largeItemCount: 128,
+  longText: 'Orders placed before 1 pm ship the same day from Chiang Mai; international orders leave every Tuesday and Friday',
+  thaiText: 'ลดสูงสุด 30% สำหรับผ้าลินินทุกชิ้น ถึงวันอาทิตย์นี้',
+  arabicText: 'زوروا متجرنا الجديد في بانكوك',
+  brokenImage: { src: '/does-not-exist.jpg', width: 800, height: 600, alt: 'Missing file' },
+}

package/templates/nova/tests/inert.test.tsx

@@ -0,0 +1,285 @@
+/**
+ * No inert settings. For every section, every visible select option and every
+ * boolean must change the rendered DOM relative to the default story. A
+ * control the editor shows that changes nothing is worse than a missing one.
+ *
+ * A setting that only matters under a contract dependency ("dep" column) is
+ * tested with that dependency satisfied — DEPENDS records which.
+ */
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import { NovaProvider } from '../src/styles/NovaProvider'
+import { SECTION_SCHEMAS, sectionRegistry } from './support/sections'
+import { resolveSettings } from '@tanqory/theme-kit'
+import { lineAddFriendSchema } from '../src/sections/LineAddFriend/schema'
+import * as fx from './fixtures'
+import type { ComponentType } from 'react'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = ComponentType<any>
+import { caseArgs, type CaseModule } from './support/case'
+import * as PageBodyStories from './cases/sections/content/page-body/PageBody.cases'
+import * as ArticleBodyStories from './cases/sections/content/article-body/ArticleBody.cases'
+import * as BlogPostsStories from './cases/sections/content/blog-posts/BlogPosts.cases'
+import * as TeamFoundersStories from './cases/sections/content/team-founders/TeamFounders.cases'
+import * as BeforeAfterStories from './cases/sections/content/before-after/BeforeAfter.cases'
+import * as TestimonialsStories from './cases/sections/trust/testimonials/Testimonials.cases'
+import * as LogoListStories from './cases/sections/trust/logo-list/LogoList.cases'
+import * as TrustBadgesStories from './cases/sections/trust/trust-badges/TrustBadges.cases'
+import * as ProductReviewsStories from './cases/sections/trust/product-reviews/ProductReviews.cases'
+import * as UgcGalleryStories from './cases/sections/trust/ugc-gallery/UgcGallery.cases'
+import * as ShopTheLookStories from './cases/sections/trust/shop-the-look/ShopTheLook.cases'
+import * as ComparisonTableStories from './cases/sections/trust/comparison-table/ComparisonTableSection.cases'
+import * as CartItemsStories from './cases/sections/utility/cart-items/CartItems.cases'
+import * as SearchResultsStories from './cases/sections/utility/search-results/SearchResultsSection.cases'
+import * as AccountStories from './cases/sections/utility/account/Account.cases'
+import * as PolicyPageStories from './cases/sections/utility/policy-page/PolicyPage.cases'
+import * as StoreLocatorStories from './cases/sections/utility/store-locator/StoreLocator.cases'
+import * as NewsletterStories from './cases/sections/utility/newsletter/NewsletterSection.cases'
+import * as ContactFormStories from './cases/sections/utility/contact-form/ContactFormSection.cases'
+import * as NotFoundStories from './cases/sections/utility/not-found/NotFound.cases'
+import * as HeaderStories from './cases/sections/layout/header/Header.cases'
+import * as AnnouncementStories from './cases/sections/layout/announcement-bar/AnnouncementBar.cases'
+import * as FooterStories from './cases/sections/layout/footer/Footer.cases'
+import * as GroupStories from './cases/sections/layout/group/Group.cases'
+import * as DividerStories from './cases/sections/layout/divider/Divider.cases'
+import * as BreadcrumbsStories from './cases/sections/layout/breadcrumbs/Breadcrumbs.cases'
+import * as HeroStories from './cases/sections/marketing/hero/Hero.cases'
+import * as SlideshowStories from './cases/sections/marketing/slideshow/Slideshow.cases'
+import * as VideoHeroStories from './cases/sections/marketing/video-hero/VideoHero.cases'
+import * as PromoBannerStories from './cases/sections/marketing/promo-banner/PromoBanner.cases'
+import * as MarqueeStories from './cases/sections/marketing/marquee/Marquee.cases'
+import * as CollectionBannerStories from './cases/sections/marketing/collection-banner/CollectionBanner.cases'
+import * as ProductDetailsStories from './cases/sections/commerce/product-details/ProductDetails.cases'
+import * as MainCollectionStories from './cases/sections/commerce/main-collection/MainCollection.cases'
+import * as ProductGridStories from './cases/sections/commerce/product-grid/ProductGrid.cases'
+import * as FeaturedCollectionStories from './cases/sections/commerce/featured-collection/FeaturedCollection.cases'
+import * as FeaturedProductStories from './cases/sections/commerce/featured-product/FeaturedProduct.cases'
+import * as CollectionListStories from './cases/sections/commerce/collection-list/CollectionList.cases'
+import * as ProductRecommendationsStories from './cases/sections/commerce/product-recommendations/ProductRecommendations.cases'
+import * as RecentlyViewedStories from './cases/sections/commerce/recently-viewed/RecentlyViewed.cases'
+import * as RichTextStories from './cases/sections/content/rich-text/RichTextSection.cases'
+import * as ImageWithTextStories from './cases/sections/content/image-with-text/ImageWithText.cases'
+import * as MulticolumnStories from './cases/sections/content/multicolumn/Multicolumn.cases'
+import * as FeatureGridStories from './cases/sections/content/feature-grid-blocks/FeatureGridBlocks.cases'
+import * as FeatureHighlightsStories from './cases/sections/content/feature-highlights/FeatureHighlights.cases'
+import * as FaqStories from './cases/sections/content/faq/Faq.cases'
+import * as CollectionLinksStories from './cases/sections/content/collection-links/CollectionLinks.cases'
+import * as ImageGalleryStories from './cases/sections/content/image-gallery/ImageGallery.cases'
+import * as TimelineStories from './cases/sections/content/timeline/Timeline.cases'
+import * as sc from './support/story-content'
+
+const LISTING = { products: fx.merchListing, total: 21, facets: fx.merchFacets, sortOptions: fx.merchSortOptions, sort: 'featured', pageHref: (n: number) => `?page=${n}` }
+
+const COMPONENTS: Record<string, { C: AnyComponent; base: Record<string, unknown> }> = {
+  header: { C: sectionRegistry['header'].component, base: caseArgs(HeaderStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'announcement-bar': { C: sectionRegistry['announcement-bar'].component, base: { ...(caseArgs(AnnouncementStories as unknown as CaseModule, 'Playground') as object), text2: 'Second', link2: '' } },
+  footer: { C: sectionRegistry['footer'].component, base: caseArgs(FooterStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  group: { C: sectionRegistry['group'].component, base: caseArgs(GroupStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  divider: { C: sectionRegistry['divider'].component, base: caseArgs(DividerStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  breadcrumbs: { C: sectionRegistry['breadcrumbs'].component, base: caseArgs(BreadcrumbsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  hero: { C: sectionRegistry['hero'].component, base: caseArgs(HeroStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  slideshow: { C: sectionRegistry['slideshow'].component, base: caseArgs(SlideshowStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'video-hero': { C: sectionRegistry['video-hero'].component, base: caseArgs(VideoHeroStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'promo-banner': { C: sectionRegistry['promo-banner'].component, base: caseArgs(PromoBannerStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  marquee: { C: sectionRegistry['marquee'].component, base: caseArgs(MarqueeStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'collection-banner': { C: sectionRegistry['collection-banner'].component, base: caseArgs(CollectionBannerStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'product-details': { C: sectionRegistry['product-details'].component, base: caseArgs(ProductDetailsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  // Listings render the host's data: give them the canvas listing.
+  'main-collection': { C: sectionRegistry['main-collection'].component, base: { ...(caseArgs(MainCollectionStories as unknown as CaseModule, 'Playground') as object), ...LISTING } },
+  'product-grid': { C: sectionRegistry['product-grid'].component, base: { ...(caseArgs(ProductGridStories as unknown as CaseModule, 'Playground') as object), ...LISTING } },
+  'featured-collection': { C: sectionRegistry['featured-collection'].component, base: caseArgs(FeaturedCollectionStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'featured-product': { C: sectionRegistry['featured-product'].component, base: caseArgs(FeaturedProductStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'collection-list': { C: sectionRegistry['collection-list'].component, base: caseArgs(CollectionListStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'product-recommendations': { C: sectionRegistry['product-recommendations'].component, base: caseArgs(ProductRecommendationsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'recently-viewed': { C: sectionRegistry['recently-viewed'].component, base: caseArgs(RecentlyViewedStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'rich-text': { C: sectionRegistry['rich-text'].component, base: caseArgs(RichTextStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'image-with-text': { C: sectionRegistry['image-with-text'].component, base: caseArgs(ImageWithTextStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  multicolumn: { C: sectionRegistry['multicolumn'].component, base: caseArgs(MulticolumnStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'feature-grid-blocks': { C: sectionRegistry['feature-grid-blocks'].component, base: caseArgs(FeatureGridStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'feature-highlights': { C: sectionRegistry['feature-highlights'].component, base: caseArgs(FeatureHighlightsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  faq: { C: sectionRegistry['faq'].component, base: caseArgs(FaqStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'collection-links': { C: sectionRegistry['collection-links'].component, base: caseArgs(CollectionLinksStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'image-gallery': { C: sectionRegistry['image-gallery'].component, base: caseArgs(ImageGalleryStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  timeline: { C: sectionRegistry['timeline'].component, base: caseArgs(TimelineStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'page-body': { C: sectionRegistry['page-body'].component, base: caseArgs(PageBodyStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'article-body': { C: sectionRegistry['article-body'].component, base: caseArgs(ArticleBodyStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'blog-posts': { C: sectionRegistry['blog-posts'].component, base: caseArgs(BlogPostsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'team-founders': { C: sectionRegistry['team-founders'].component, base: caseArgs(TeamFoundersStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'before-after': { C: sectionRegistry['before-after'].component, base: caseArgs(BeforeAfterStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  testimonials: { C: sectionRegistry['testimonials'].component, base: caseArgs(TestimonialsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'logo-list': { C: sectionRegistry['logo-list'].component, base: caseArgs(LogoListStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'trust-badges': { C: sectionRegistry['trust-badges'].component, base: caseArgs(TrustBadgesStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'product-reviews': { C: sectionRegistry['product-reviews'].component, base: caseArgs(ProductReviewsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'ugc-gallery': { C: sectionRegistry['ugc-gallery'].component, base: caseArgs(UgcGalleryStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'shop-the-look': { C: sectionRegistry['shop-the-look'].component, base: caseArgs(ShopTheLookStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'comparison-table': { C: sectionRegistry['comparison-table'].component, base: caseArgs(ComparisonTableStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'cart-items': { C: sectionRegistry['cart-items'].component, base: caseArgs(CartItemsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'search-results': { C: sectionRegistry['search-results'].component, base: caseArgs(SearchResultsStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'account': { C: sectionRegistry['account'].component, base: caseArgs(AccountStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'policy-page': { C: sectionRegistry['policy-page'].component, base: caseArgs(PolicyPageStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'store-locator': { C: sectionRegistry['store-locator'].component, base: caseArgs(StoreLocatorStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'newsletter': { C: sectionRegistry['newsletter'].component, base: caseArgs(NewsletterStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  'contact-form': { C: sectionRegistry['contact-form'].component, base: caseArgs(ContactFormStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+  // No case file of its own: the schema defaults plus an Add friend link (without one it renders nothing live).
+  'line-add-friend': { C: sectionRegistry['line-add-friend'].component, base: { ...resolveSettings(lineAddFriendSchema, { addFriendUrl: 'https://lin.ee/abc1234' }).settings, description: 'Get offers and order updates.' } },
+  'not-found': { C: sectionRegistry['not-found'].component, base: caseArgs(NotFoundStories as unknown as CaseModule, 'Playground') as Record<string, unknown> },
+}
+
+/**
+ * Settings that change BEHAVIOUR, not the first render — each is covered by a
+ * play story instead (named here so the exception is visible and reviewed).
+ */
+const INTERACTION_ONLY: Record<string, Record<string, string>> = {
+  faq: { singleOpen: 'Faq.cases · SingleOpen: opening one closes the others' },
+  // The cart is always a link to /cart (main #474); the setting only changes what a click does.
+  header: { cartAction: 'Header.cases · Behaviour · cartAction: drawer opens the drawer, page follows the link' },
+  'contact-form': { successMessage: 'ContactFormSection.cases · Sent: replaces the form after sending' },
+}
+
+/** Text handles the ADAPTER resolves into data (the section receives the resolved links). */
+const RESOLVED_BY_ADAPTER: Record<string, Record<string, string>> = {
+  'search-results': { noResultsCollections: 'comma handles → suggestions (adapter collectionLinks)' },
+  'not-found': { collectionLinks: 'comma handles → collections (adapter collectionLinks)' },
+}
+
+/** DATA REQUIREMENT settings with nothing to render until the platform has the data. */
+const WAITS_FOR_DATA: Record<string, Record<string, string>> = {
+  'store-locator': { showMap: 'coordinates + a map provider (12G conflict 3); off by default' },
+}
+
+const PDP_BLOCKS = (caseArgs(ProductDetailsStories as unknown as CaseModule, 'Playground') as { blocks: object[] }).blocks
+
+const IMAGE_ONLY = { eyebrow: '', heading: '', subtext: '', buttonLabel: '', secondaryLabel: '' }
+const ENDED = { clock: () => Date.UTC(2030, 0, 1) }
+
+/** field → args that satisfy its contract dependency. */
+const DEPENDS: Record<string, Record<string, Record<string, unknown>>> = {
+  header: {
+    logoHeight: { shop: fx.shopWithLogo }, // dep: global brand logo image set
+    transparentOnHero: { overHero: true }, // dep: first section is a hero with media
+    showLocale: { localization: fx.localization }, // dep: markets available
+    logo: { shop: fx.shop }, // dep: no brand logo image (image → logo text → shop name)
+    cartCount: { cart: fx.cartSummaryMany }, // items ≠ lines (the base cart has 2 of each)
+  },
+  'announcement-bar': { rotation: { showArrows: false }, link3: { text3: 'Third message' } }, // dep: text3
+  group: {
+    contentWidth: { columns: 1 }, // dep: columns = 1
+    headerSize: { blocks: [{ type: 'heading', settings: { text: 'Heading' } }] }, // default for heading blocks without a size
+    columnRatio: {}, // dep: columns = 2 (default)
+    // never more tracks than cells: 3 / 4 columns need ≥ 4 cells
+    columns: { blocks: ['truck', 'return', 'chat', 'gift'].flatMap((icon) => [{ type: 'icon', settings: { icon } }, { type: 'heading', settings: { text: icon } }]) },
+  },
+  divider: { label: {} },
+  hero: {
+    // dep: layout = image-background · contained. With copy on the image the floor
+    // (45 / 62) decides; with no copy the chosen strength shows as a flat overlay.
+    overlay: { layout: 'image-background', ...IMAGE_ONLY },
+    imageFit: { layout: 'split' }, // dep: layout = split
+  },
+  'video-hero': { overlayOpacity: { overlayOpacity: 70, eyebrow: '', text: '', videoUrl: '', mobileVideoUrl: '' } }, // floor 45 without body copy or motion
+  'promo-banner': { afterEnd: ENDED, endedMessage: { ...ENDED, afterEnd: 'show-ended-message' } }, // dep: endsAt reached
+  'collection-banner': { overlayOpacity: { overlayOpacity: 70, showDescription: false } }, // above the 45 floor
+  'product-details': {
+    lowStockThreshold: { lowStockThreshold: 2 }, // Queen / Oat has 3: low at ≤ 5, not at ≤ 2 (dep showInventory ≠ never)
+    showInventory: { showInventory: 'always', lowStockThreshold: 2 }, // from always, with 3 in stock not low at ≤ 2: low-only and never both hide it
+    showSku: { blocks: [...PDP_BLOCKS, { type: 'product-sku' }] }, // dep: a product-sku block
+  },
+  'featured-collection': {
+    layout: { productsToShow: 8 }, // a carousel with ≤ columns products is a grid
+    showNavigation: { layout: 'carousel', productsToShow: 8 }, // dep: layout = carousel
+  },
+  'featured-product': { buttonLabel: { showVariants: false }, buttonLink: { showVariants: false } }, // dep: showVariants off
+  'collection-list': { limit: { items: [], fallbackCollections: fx.merchRooms, limit: 3 } }, // dep: no collection-item blocks
+  // A carousel with no more items than columns is a grid: layout needs more items than the row shows.
+  'product-recommendations': { layout: { limit: 6 } },
+  'image-with-text': { overlap: { panelBackground: 'muted' } }, // dep: panelBackground = muted
+  multicolumn: { iconSize: { showImage: false, items: sc.storyIconColumns } }, // dep: showImage off
+  faq: { headerAlignment: { layout: 'above' } }, // dep: layout = above
+  // eyebrow / headerSize style the header, which exists only with a heading.
+  'feature-grid-blocks': {
+    eyebrow: { heading: 'Why linen' },
+    headerSize: { heading: 'Why linen' },
+    blockBackground: { blocks: sc.storyColumns.map((c) => ({ type: 'column', ...c })) }, // non-lead tiles with images
+  },
+  'image-gallery': { eyebrow: { heading: 'The studio' }, headerSize: { heading: 'The studio' } },
+  'collection-links': { listSize: { style: 'list' }, columns: { style: 'list' } }, // dep: style = list
+  'recently-viewed': {
+    limit: { limit: 3 }, // 6 viewed
+    excludeCurrent: { currentProductId: fx.merchMug.id }, // dep: a current product
+    layout: { limit: 8, products: [...fx.merchProducts.slice(0, 8)] },
+  },
+  // fallbackTitle names the editor sample / setup when there is no data.
+  'page-body': { fallbackTitle: { page: null, __mode: 'editor' } },
+  'article-body': { fallbackTitle: { article: null, __mode: 'editor' } },
+  'blog-posts': {
+    fallbackTitle: { blog: null, __mode: 'editor' },
+    featuredStyle: { featuredFirst: true }, // dep: featuredFirst
+    showTagFilter: { filterTags: 'studio, care' }, // dep: tags to filter by
+    filterTags: { showTagFilter: true }, // dep: showTagFilter
+  },
+  // The founder layout has no section heading and one person: these style the grid / list.
+  'team-founders': {
+    columns: { layout: 'grid' },
+    showBio: { layout: 'grid' },
+    heading: { layout: 'grid' },
+    headerSize: { layout: 'grid' },
+  },
+  // A carousel with no more items than columns is a grid.
+  testimonials: { layout: { testimonials: sc.storyTestimonials }, columns: { columns: 2 } }, // columns defaults to its max (3)
+  'ugc-gallery': { layout: { photos: sc.storyUgc } },
+  // headerSize styles the heading, which is optional here.
+  'logo-list': { headerSize: { heading: 'As featured in' } },
+  'trust-badges': { headerSize: { heading: 'Buy with confidence' } },
+  // Before a query: the empty heading / text (headerSize sizes that heading).
+  'search-results': { emptyHeading: { query: '' }, emptySub: { query: '' }, headerSize: { query: '' } },
+  // Order history exists only when signed in; 20 per page needs more than 10 orders.
+  account: {
+    showOrderHistory: { customer: sc.storeCustomer },
+    contentWidth: { customer: sc.storeCustomer },
+    ordersPerPage: { customer: { ...sc.storeCustomer, orders: Array.from({ length: 14 }, (_, i) => ({ ...sc.storeCustomer.orders[0], id: `o${i}`, number: `#HC-${10500 - i}` })) } },
+  },
+  'policy-page': {
+    // In the editor: blank → setup; a handle that is not published → the message. (Live, both show the message.)
+    policy: { policy: '', content: null, __mode: 'editor' },
+    showLastUpdated: { content: { ...sc.storeRefundPolicy, updatedAt: '2026-08-01' } }, // dep: a real date
+    // from always with 2 headings: auto (needs ≥ 4) and never both hide the list
+    showTableOfContents: { showTableOfContents: 'always', content: { ...sc.storeRefundPolicy, bodyHtml: '<h2>Returns</h2><p>30 days.</p><h2>Refunds</h2><p>5 days.</p>' } },
+  },
+  newsletter: { buttonUrl: { endpoint: '' } }, // dep: no form endpoint
+}
+
+const html = (C: AnyComponent, { __mode, ...props }: Record<string, unknown>) => {
+  const { container, unmount } = render(
+    <NovaProvider mode={__mode as 'editor' | undefined}>
+      <C {...props} />
+    </NovaProvider>,
+  )
+  // useId values differ per render root: normalise them, or every section with a labelled field "changes".
+  const out = container.innerHTML.replace(/:r[0-9a-z]+:/g, ":id:")
+  unmount()
+  return out
+}
+
+for (const schema of SECTION_SCHEMAS) {
+  describe(`${schema.name}: every visible setting changes the output`, () => {
+    const { C, base } = COMPONENTS[schema.name]
+    for (const [key, f] of Object.entries(schema.fields)) {
+      if (f.legacyHidden || f.binding === 'adapter' || INTERACTION_ONLY[schema.name]?.[key] || RESOLVED_BY_ADAPTER[schema.name]?.[key] || WAITS_FOR_DATA[schema.name]?.[key]) continue
+      const dep = DEPENDS[schema.name]?.[key] ?? {}
+      const b = { ...base, ...dep }
+      if (f.control === 'select') {
+        for (const opt of f.options as readonly string[]) {
+          if (opt === b[key]) continue
+          it(`${key} = ${opt}`, () => expect(html(C, { ...b, [key]: opt })).not.toBe(html(C, b)))
+        }
+      } else if (f.control === 'boolean') {
+        it(`${key} toggled`, () => expect(html(C, { ...b, [key]: !b[key] })).not.toBe(html(C, b)))
+      } else if (f.control === 'range' || f.control === 'number') {
+        const next = (b[key] as number) === f.default ? Math.min((f as { max: number }).max, (b[key] as number) + 1) : f.default
+        it(`${key} = ${next}`, () => expect(html(C, { ...b, [key]: next })).not.toBe(html(C, b)))
+      } else if (f.control === 'text' || f.control === 'url') {
+        it(`${key} set`, () => expect(html(C, { ...b, [key]: 'Changed · value' })).not.toBe(html(C, b)))
+      }
+    }
+  })
+}

package/templates/nova/tests/line-add-friend.test.tsx

@@ -0,0 +1,108 @@
+/**
+ * Add us on LINE (army #7740): the "line-add-friend" section and the footer's "footer-line" block, rendered the way
+ * entry.abi.tsx renders a page. Both show LINE's Add friend button to the store's LINE Official Account only for an
+ * https LINE link, and neither is on a template: the merchant places them in the theme editor.
+ */
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { setThemeBundle } from '@tanqory/theme-kit/runtime'
+import { sectionModules } from '@tanqory/theme-kit/runtime'
+import { registerSections } from '@tanqory/theme-kit/runtime'
+import { SectionTree } from '@tanqory/theme-kit/runtime'
+import { DataProvider } from '@tanqory/theme-kit/runtime'
+import { ThemeProvider } from '@tanqory/theme-kit/runtime'
+import type { ContentNode } from '@tanqory/theme-kit/runtime'
+import { localeStrings } from '@tanqory/theme-kit/runtime'
+import { bundle } from '../lib/bundle'
+import { AbiShell } from '@tanqory/theme-kit/runtime'
+import { AbiCartProvider } from '@tanqory/theme-kit/runtime'
+import type { PageData } from '@tanqory/theme-kit/runtime'
+import { createDataApi } from '@tanqory/theme-kit/runtime'
+import { locationOf } from '@tanqory/theme-kit/runtime'
+import theme from '../theme.config'
+
+setThemeBundle(bundle)
+registerSections(Object.values(sectionModules()).map((m) => m.default))
+
+const LOCALES = Object.fromEntries(
+  Object.entries(bundle.locales).map(([path, mod]) => [path.match(/\/([^/]+)\.json$/)?.[1] ?? 'en', (mod as { default: Record<string, string> }).default]),
+)
+
+const PAGE_DATA = {
+  route: 'index',
+  shop: { name: 'Baan Craft', description: null, brand: null, policies: {}, primaryDomain: { host: 'demo.example', url: 'https://demo.example', sslEnabled: true } },
+  menus: {}, products: {}, collections: {}, collectionList: null, pages: {}, blogs: {}, articles: {},
+  search: null, recommendations: {}, policyHandle: null, accountUrls: null, cart: null,
+  localization: { country: { isoCode: 'TH', name: 'Thailand', currency: { isoCode: 'THB', name: 'Thai Baht', symbol: '฿' } }, language: { isoCode: 'EN', name: 'English' }, availableCountries: [], availableLanguages: [] },
+  signedIn: null, unresolved: [], routeMissing: false,
+} as unknown as PageData
+
+const OA = 'https://lin.ee/baancraft'
+
+function render(tree: ContentNode[], { ui = 'en', preview = false } = {}): Document {
+  const html = renderToString(
+    <DataProvider value={createDataApi(PAGE_DATA, null)}>
+      <ThemeProvider settings={{}} locale={localeStrings(ui, LOCALES)}>
+        <AbiCartProvider initial={null} remote={null}>
+          <AbiShell location={locationOf('https://demo.example/', {})} locale={ui} settings={{}} preview={preview}>
+            <SectionTree tree={tree} />
+          </AbiShell>
+        </AbiCartProvider>
+      </ThemeProvider>
+    </DataProvider>,
+  )
+  return new DOMParser().parseFromString(html, 'text/html')
+}
+
+const section = (settings: Record<string, unknown>) => [{ type: 'line-add-friend', id: 'line', settings } as unknown as ContentNode]
+const footer = (blocks: { type: string; settings?: Record<string, unknown> }[]) => [{ type: 'footer', id: 'footer', settings: {}, blocks } as unknown as ContentNode]
+const addFriend = (doc: Document) => doc.querySelector<HTMLAnchorElement>('a.nv-line-add')
+
+describe('Add us on LINE section', () => {
+  it('shows the heading and LINE\'s Add friend button to the store\'s LINE Official Account', () => {
+    const doc = render(section({ addFriendUrl: OA, description: 'Get new arrivals first.' }))
+    expect(doc.querySelector('[data-nv-section="line-add-friend"] h2')?.textContent).toBe('Add us on LINE')
+    const a = addFriend(doc)!
+    expect(a.getAttribute('href')).toBe(OA)
+    expect(a.textContent).toBe('Add friend')
+    expect(a.getAttribute('aria-label')).toBe('Add friend on LINE')
+    expect(a.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true')
+    expect(a.getAttribute('rel')).toBe('noopener')
+  })
+
+  it('says Add friend in the shopper\'s language', () => {
+    expect(addFriend(render(section({ addFriendUrl: OA }), { ui: 'th' }))?.textContent).toBe(LOCALES.th!.lineAddFriend)
+    expect(LOCALES.th!.lineAddFriend).not.toBe(LOCALES.en!.lineAddFriend)
+  })
+
+  it('shows shoppers nothing without an https LINE link, and asks the merchant for it in the editor', () => {
+    for (const addFriendUrl of ['', 'https://evil.example/ti/p/@x', 'http://line.me/R/ti/p/@baancraft', 'javascript:alert(1)']) {
+      const doc = render(section({ addFriendUrl }))
+      expect(doc.querySelector('[data-nv-section="line-add-friend"]'), addFriendUrl).toBeNull()
+    }
+    const editor = render(section({ addFriendUrl: '' }), { preview: true })
+    expect(editor.body.textContent).toContain('Add your LINE add friend link')
+    expect(addFriend(editor)).toBeNull()
+  })
+
+  it('is offered in Add section and on no template (off by default)', () => {
+    expect(theme.sections.some((s) => s.id === 'line-add-friend')).toBe(true)
+    const starter = Object.values(import.meta.glob(['../templates/*.json', '../groups/*.json'], { eager: true, query: '?raw', import: 'default' }))
+    expect(starter.length).toBeGreaterThan(0)
+    for (const json of starter) expect(json as string).not.toMatch(/line-add-friend|footer-line/)
+  })
+})
+
+describe('footer LINE block', () => {
+  it('puts LINE\'s Add friend button in the footer\'s utility row', () => {
+    const doc = render(footer([{ type: 'footer-brand' }, { type: 'footer-line', settings: { addFriendUrl: 'https://line.me/R/ti/p/@baancraft' } }]))
+    const a = doc.querySelector<HTMLAnchorElement>('footer .nv-footer__utility-start a.nv-line-add')
+    expect(a?.getAttribute('href')).toBe('https://line.me/R/ti/p/@baancraft')
+    expect(a?.textContent).toBe('Add friend')
+  })
+
+  it('shows no LINE button without the block or without a LINE link', () => {
+    expect(addFriend(render(footer([{ type: 'footer-brand' }])))).toBeNull()
+    expect(addFriend(render(footer([{ type: 'footer-line', settings: { addFriendUrl: '' } }])))).toBeNull()
+  })
+})