create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/sections/data.ts

@@ -0,0 +1,115 @@
+/**
+ * Nova's presentation mapping, shared by the sections' data bindings: which
+ * saved blocks a section shows and in what shape, whether the header sits over
+ * a media hero, what "add" means for a product card. WHERE the data comes from
+ * is the runtime's (it fills the store context; `@tanqory/theme-sdk`'s
+ * imageFor / menuFor / collectionFor / productFor … read it); HOW it is
+ * presented is decided here.
+ */
+import { NovaImage, NovaMenu, NovaVideo, Product, SavedBlock, SavedSection, SettingIssue, SettingsOf, StoreContext, ThemeActions, imageFor, menuFor, resolveSettings, videoFor } from '@tanqory/theme-kit'
+import { ColumnInstance, columnSchema } from '../components/content/blocks/Column'
+import { imageSchema } from '../components/content/blocks/Image'
+import { footerMenuSchema } from './Footer/blocks/FooterMenu'
+import { heroSchema } from './Hero/schema'
+import { slideSchema } from './Slideshow/blocks/Slide'
+import { videoHeroSchema } from './VideoHero/schema'
+import type { accordionSchema } from './Group/blocks/Accordion'
+import type { buttonSchema } from '../components/content/blocks/Button'
+import type { footerBrandSchema } from './Footer/blocks/FooterBrand'
+import type { footerTextSchema } from './Footer/blocks/FooterText'
+import type { footerLineSchema } from './Footer/blocks/FooterLine'
+import type { headingSchema } from '../components/content/blocks/Heading'
+import type { iconSchema } from '../components/content/blocks/Icon'
+import type { jumboTextSchema } from './Group/blocks/JumboText'
+import { NEWSLETTER_BLOCK, newsletterBlockSchema } from '../components/forms/blocks/Newsletter'
+import type { paymentIconsSchema } from '../components/commerce/blocks/PaymentIcons'
+import type { socialLinksSchema } from '../components/navigation/blocks/SocialLinks'
+import type { spacerSchema } from './Group/blocks/Spacer'
+import type { textSchema } from '../components/content/blocks/Text'
+import type { videoSchema } from '../components/content/blocks/Video'
+
+export const blocksOf = (node: SavedSection, type: string) => (node.blocks ?? []).filter((b) => b.type === type)
+
+/**
+ * 12A header transparentOnHero needs to know whether the page opens with a
+ * hero-type section that has media (hero image layouts, slideshow, video-hero).
+ */
+export function isHeroWithMedia(node: SavedSection | undefined, ctx: StoreContext): boolean {
+  if (!node) return false
+  if (node.type === 'hero') {
+    const r = resolveSettings(heroSchema, node.settings)
+    return (r.settings.layout === 'image-background' || r.settings.layout === 'contained') && Boolean(imageFor(ctx, r.handles.backgroundImage) || videoFor(ctx, r.handles.video))
+  }
+  if (node.type === 'slideshow') return (node.blocks ?? []).some((b) => b.type === 'slide' && Boolean(imageFor(ctx, resolveSettings(slideSchema, b.settings).handles.image)))
+  if (node.type === 'video-hero') {
+    const r = resolveSettings(videoHeroSchema, node.settings)
+    return Boolean(r.settings.videoUrl || imageFor(ctx, r.handles.poster))
+  }
+  return false
+}
+
+export function columnsOf(ctx: StoreContext, saved: SavedBlock[] | undefined, issues: SettingIssue[]): ColumnInstance[] {
+  return (saved ?? []).filter((b) => b.type === 'column').map((b) => {
+    const r = resolveSettings(columnSchema, b.settings)
+    issues.push(...r.issues)
+    return { settings: r.settings, image: imageFor(ctx, r.handles.image), video: videoFor(ctx, r.handles.video) }
+  })
+}
+
+/**
+ * A placed block, as a section receives it: the block type, its (partial,
+ * saved) settings and any resolved data the adapter attached.
+ */
+export type BlockInstance =
+  | { type: 'heading'; settings?: Partial<SettingsOf<typeof headingSchema>> }
+  | { type: 'text'; settings?: Partial<SettingsOf<typeof textSchema>> }
+  | { type: 'button'; settings?: Partial<SettingsOf<typeof buttonSchema>> }
+  | { type: 'image'; settings?: Partial<SettingsOf<typeof imageSchema>>; image?: NovaImage | null }
+  | { type: 'icon'; settings?: Partial<SettingsOf<typeof iconSchema>> }
+  | { type: 'spacer'; settings?: Partial<SettingsOf<typeof spacerSchema>> }
+  | { type: 'video'; settings?: Partial<SettingsOf<typeof videoSchema>>; video?: NovaVideo | null }
+  | { type: 'jumbo-text'; settings?: Partial<SettingsOf<typeof jumboTextSchema>> }
+  | { type: 'accordion'; settings?: Partial<SettingsOf<typeof accordionSchema>> }
+  | { type: 'footer-brand'; settings?: Partial<SettingsOf<typeof footerBrandSchema>> }
+  | { type: 'footer-menu'; settings?: Partial<Pick<SettingsOf<typeof footerMenuSchema>, 'heading'>>; menu?: NovaMenu | null }
+  | { type: 'footer-text'; settings?: Partial<SettingsOf<typeof footerTextSchema>> }
+  | { type: 'social-links'; settings?: Partial<SettingsOf<typeof socialLinksSchema>> }
+  | { type: 'payment-icons'; settings?: Partial<SettingsOf<typeof paymentIconsSchema>> }
+  | { type: 'newsletter-signup'; settings?: Partial<SettingsOf<typeof newsletterBlockSchema>>; endpoint?: string; formResult?: StoreContext['formResult'] }
+  | { type: 'footer-line'; settings?: Partial<SettingsOf<typeof footerLineSchema>> }
+
+export function adaptBlocks(ctx: StoreContext, saved: SavedBlock[] | undefined, issues: SettingIssue[]): BlockInstance[] {
+  return (saved ?? []).map((b) => {
+    if (b.type === 'image') {
+      const r = resolveSettings(imageSchema, b.settings)
+      issues.push(...r.issues)
+      return { type: 'image', settings: r.settings, image: ctx.images?.[r.handles.image] ?? null }
+    }
+    if (b.type === 'footer-menu') {
+      const r = resolveSettings(footerMenuSchema, b.settings)
+      issues.push(...r.issues)
+      const m = menuFor(ctx, r.handles.menu)
+      // No saved heading → the menu's own name (what stores saved against), then the default.
+      const saved = typeof b.settings?.heading === 'string' ? b.settings.heading.trim() : ''
+      return { type: 'footer-menu', settings: { heading: saved || m?.title || r.settings.heading }, menu: m }
+    }
+    if (b.type === 'video') {
+      const video = typeof b.settings?.url === 'string' ? ctx.videos?.[b.settings.url] : undefined
+      return { type: 'video', settings: b.settings as never, video: video ?? null }
+    }
+    if (b.type === NEWSLETTER_BLOCK || newsletterBlockSchema.legacyNames?.includes(b.type)) {
+      // The platform's native form endpoint, as the Newsletter section gets it: zero setup in a footer or group.
+      // A block saved under its old name (`newsletter`) is the same block (alias on read).
+      return { type: NEWSLETTER_BLOCK, settings: b.settings as never, ...(ctx.newsletterEndpoint ? { endpoint: ctx.newsletterEndpoint } : {}), ...(ctx.formResult ? { formResult: ctx.formResult } : {}) }
+    }
+    // Other blocks carry only settings; the section resolves their defaults.
+    return { type: b.type, settings: b.settings } as BlockInstance
+  })
+}
+
+
+/** Add a product to the cart: its first available variant, else its first. */
+export function addProduct(actions: ThemeActions, product: Product): Promise<boolean> | undefined {
+  const v = product.variants?.find((x) => x.available) ?? product.variants?.[0]
+  return v ? actions.cart.add(v.id, 1) : undefined
+}

package/templates/nova/src/sections/shipped-copy.ts

@@ -0,0 +1,25 @@
+/**
+ * Shipped copy the runtime must NOT localize or fill in (theme `shippedCopy`,
+ * @tanqory/theme-kit runtime/render/localized-copy.ts). Each entry names the renderer
+ * that depends on it; `tests/localized-copy.test.ts` scans the theme for new
+ * cases and fails when one is not listed here.
+ */
+
+/**
+ * The renderer compares the value with the shipped English, so a translated
+ * value would read as the merchant's own:
+ * - footer-brand.title: `title !== 'Your store'` — the default title is not an
+ *   override; the brand logo / store name shows instead (FooterBrand.tsx).
+ * - footer-brand.tagline: `=== TAGLINE_STARTER` — an editor-only placeholder,
+ *   never shown to shoppers (FooterBrand.tsx).
+ * - testimonial.quote: `=== TESTIMONIAL_STARTER` — the editor's starter state
+ *   (Testimonials.tsx); the live store drops it as starter text.
+ */
+export const KEEP_SHIPPED_COPY = ['block:footer-brand.title', 'block:footer-brand.tagline', 'block:testimonial.quote'] as const
+
+/**
+ * An unset value is derived from data, so the default must not be filled in:
+ * - footer-menu.heading: no saved heading → the menu's own name
+ *   (sections/data.ts adaptBlocks). A saved heading is still localized.
+ */
+export const DERIVED_WHEN_UNSET = ['block:footer-menu.heading'] as const

package/templates/nova/src/sections/starter.ts

@@ -0,0 +1,49 @@
+/**
+ * Starter text: what the starter templates, presets and setting defaults say
+ * in place of content, to tell a merchant what to write.
+ *
+ * The editor shows it as it is. On the live storefront the runtime renders no
+ * section whose own settings still hold one of these, and leaves out any block
+ * that does (theme `starterText`) — so a store that opens before it is set up
+ * shows less, never an instruction or a review nobody wrote.
+ *
+ * Exact strings, compared trimmed. `tests/starter.test.ts` fails when a
+ * template or default carries instruction-like text that is not listed here,
+ * so the list and the templates cannot drift apart.
+ */
+import { TESTIMONIAL_STARTER } from './Testimonials/blocks/Testimonial'
+
+export const STARTER_TEXT: readonly string[] = [
+  // Home
+  'Introduce your store in a sentence or two — what you make, and who it is for.',
+  'Tell customers how your products are made, and by whom.',
+  TESTIMONIAL_STARTER,
+  'Customer name',
+  'City',
+  'Delivery | Describe how and when you ship.\nReturns | Describe your returns window.\nCare | Describe how to look after a piece.\nPayment | List the ways customers can pay.',
+  // About
+  'Tell the story of your store',
+  'Describe the place and the process.',
+  'Introduce the people who make or choose what you sell.',
+  '<p>A paragraph or two on what you make, where, and why it matters to you.</p>',
+  'Milestone 1',
+  'Milestone 2',
+  'Milestone 3',
+  'Milestone 4',
+  'A line about this moment in your story.',
+  // Contact
+  'Add a question customers often ask',
+  'Add another question',
+  '<p>Answer it here, in your own words.</p>',
+  // Bundle product
+  'Item 1',
+  'Item 2',
+  'Item 3',
+  'Describe this piece of the set.',
+  // Featured collection, blog
+  '<p>Say why these pieces belong together.</p>',
+  'Tell readers what you will send them, and how often.',
+  // Setting defaults
+  'Tell your story here…',
+  'Describe this step.',
+]

package/templates/nova/src/styles/Container.css

@@ -0,0 +1,6 @@
+.nv-container { width: 100%; margin-inline: auto; padding-inline: var(--page-gutter); }
+.nv-container[data-width='narrow'] { max-width: calc(var(--container-narrow) + 2 * var(--page-gutter)); }
+.nv-container[data-width='content'] { max-width: calc(var(--container-content) + 2 * var(--page-gutter)); }
+.nv-container[data-width='standard'] { max-width: calc(var(--container-standard) + 2 * var(--page-gutter)); }
+.nv-container[data-width='wide'] { max-width: calc(var(--container-wide) + 2 * var(--page-gutter)); }
+.nv-container[data-width='full'] { max-width: none; }

package/templates/nova/src/styles/Container.tsx

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import './Container.css'
+
+/** Nova 02 · Container — narrow 640 · content 960 · standard 1280 · wide 1536 · full; page gutter 16 / 24 / 40. */
+export type ContainerWidth = 'narrow' | 'content' | 'standard' | 'wide' | 'full'
+
+export function Container({ width = 'standard', children, className, ...rest }: { width?: ContainerWidth; children: ReactNode } & HTMLAttributes<HTMLDivElement>): JSX.Element {
+  return (
+    <div className={['nv-container', className].filter(Boolean).join(' ')} data-width={width} {...rest}>
+      {children}
+    </div>
+  )
+}

package/templates/nova/src/styles/Icon.css

@@ -0,0 +1,2 @@
+.nv-icon { flex: none; stroke-width: var(--icon-stroke); }
+.nv-icon[data-icon='play'] { fill: currentColor; }

package/templates/nova/src/styles/Icon.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react'
+import './Icon.css'
+
+/**
+ * Nova 02 · Icon — 24px grid, 1.6 stroke (2.0 under iconStyle filled), round
+ * caps. Sizes sm 16 · md 20 · lg 24. Decorative by default (aria-hidden);
+ * pass `label` for a meaningful standalone icon. Directional icons mirror in RTL.
+ */
+const PATHS: Record<string, ReactNode> = {
+  // Nova 02 set
+  search: <path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" />,
+  bag: <path d="M5 8h14l-1 12H6L5 8zM9 8V6a3 3 0 0 1 6 0v2" />,
+  user: <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c1-4 4-6 8-6s7 2 8 6" />,
+  menu: <path d="M4 8h16M4 16h16" />,
+  close: <path d="M6 6l12 12M18 6L6 18" />,
+  'chevron-right': <path d="M9 6l6 6-6 6" />,
+  'chevron-left': <path d="M15 6l-6 6 6 6" />,
+  'chevron-down': <path d="M6 9l6 6 6-6" />,
+  'chevron-up': <path d="M6 15l6-6 6 6" />,
+  plus: <path d="M12 5v14M5 12h14" />,
+  minus: <path d="M5 12h14" />,
+  check: <path d="M5 12l5 5 9-10" />,
+  heart: <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />,
+  truck: <path d="M3 7h11v9H3zM14 10h4l3 3v3h-7" />,
+  return: <path d="M4 12a8 8 0 1 0 3-6.2M4 4v4h4" />,
+  shield: <path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6l7-3z" />,
+  mail: <path d="M4 6h16v12H4zM4 7l8 6 8-6" />,
+  globe: <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2c3 3 3 17 0 20M12 2c-3 3-3 17 0 20" />,
+  // icon block options (12D)
+  chat: <path d="M21 11.5a7.5 7.5 0 0 1-11 6.6L4 19.5l1.4-4.3A7.5 7.5 0 1 1 21 11.5z" />,
+  star: <path d="M12 3.5 14.6 9l6 .6-4.5 4 1.4 5.9L12 16.4 6.5 19.5 7.9 13.6 3.4 9.6l6-.6z" />,
+  gift: <path d="M4 9h16v11H4zM4 13h16M12 9v11M8.5 9a2.2 2.2 0 1 1 3.5-1.8M15.5 9a2.2 2.2 0 1 0-3.5-1.8" />,
+  leaf: <path d="M5 19c0-8 6-13 14-13 0 9-5 14-13 14a8 8 0 0 1 5-7" />,
+  clock: <path d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM12 7v5l3.5 2" />,
+  card: <path d="M3 6.5h18v11H3zM3 10h18M6.5 14.5h4" />,
+  filter: <path d="M4 7h10M18 7h2M4 17h4M12 17h8M16 5v4M10 15v4" />,
+  zoom: <path d="M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM15.2 15.2 20 20M10.5 8v5M8 10.5h5" />,
+  link: <path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" />,
+  share: <path d="M12 3.5v12M7.5 8 12 3.5 16.5 8M5 12.5v7h14v-7" />,
+  drop: <path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z" />,
+  // utility
+  'arrow-right': <path d="M5 12h14M13 6l6 6-6 6" />,
+  'arrow-up-right': <path d="M7 17 17 7M8 7h9v9" />,
+  pause: <path d="M9 6v12M15 6v12" />,
+  play: <path d="M8 5v14l11-7z" />,
+  image: <path d="M4 5h16v14H4zM4 16l5-5 4 4 3-3 4 4M15 9.5a1.5 1.5 0 1 0 0-.01" />,
+  alert: <path d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM12 8v5M12 16v.01" />,
+  info: <path d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM12 11v5M12 8v.01" />,
+  // social (simplified marks)
+  instagram: <path d="M8.5 4h7A4.5 4.5 0 0 1 20 8.5v7a4.5 4.5 0 0 1-4.5 4.5h-7A4.5 4.5 0 0 1 4 15.5v-7A4.5 4.5 0 0 1 8.5 4zM12 8.4a3.6 3.6 0 1 0 0 7.2 3.6 3.6 0 0 0 0-7.2zM17 7v.01" />,
+  facebook: <path d="M14.5 8.5H16V5.6h-1.9c-1.9 0-3.1 1.2-3.1 3.1v1.8H9v2.9h2v6.1h3v-6.1h2.1l.5-2.9H14v-1.4c0-.4.2-.6.5-.6z" />,
+  x: <path d="M5 5l14 14M19 5 5 19" />,
+  tiktok: <path d="M13.5 5v9.2a3.3 3.3 0 1 1-2.4-3.18M13.5 5c.4 1.9 1.9 3.2 3.9 3.4" />,
+  youtube: <path d="M6.2 6.5h11.6A3.2 3.2 0 0 1 21 9.7v4.6a3.2 3.2 0 0 1-3.2 3.2H6.2A3.2 3.2 0 0 1 3 14.3V9.7a3.2 3.2 0 0 1 3.2-3.2zM11 9.8l4 2.2-4 2.2z" />,
+  // Nova 13 · feedback: every status carries an icon and a word (colour is a third signal).
+  warning: <path d="M12 4 21.5 20h-19L12 4zM12 10v4.5M12 17.2v.01" />,
+  error: <path d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6" />,
+  trash: <path d="M5 7h14M10 7V5h4v2M7 7l1 12h8l1-12M10.5 10.5v5M13.5 10.5v5" />,
+  wifi: <path d="M3.5 9.5a12 12 0 0 1 17 0M6.5 12.8a7.5 7.5 0 0 1 11 0M9.5 16a3.2 3.2 0 0 1 5 0M12 19v.01" />,
+}
+
+/** Icons that point somewhere and so mirror under RTL. */
+const DIRECTIONAL = new Set(['chevron-right', 'chevron-left', 'arrow-right', 'arrow-up-right', 'return'])
+
+export const ICON_NAMES = Object.keys(PATHS) as IconName[]
+export type IconName = keyof typeof PATHS & string
+
+export type IconSize = 'sm' | 'md' | 'lg' | number
+
+export interface IconProps {
+  name: IconName
+  size?: IconSize
+  /** Accessible name. Omit for decorative icons (the default). */
+  label?: string
+  className?: string
+}
+
+const PX: Record<string, number> = { sm: 16, md: 20, lg: 24 }
+
+export function Icon({ name, size = 'md', label, className }: IconProps): JSX.Element {
+  const px = typeof size === 'number' ? size : PX[size]
+  return (
+    <svg
+      className={['nv-icon', DIRECTIONAL.has(name) ? 'nv-dir' : '', className].filter(Boolean).join(' ')}
+      width={px}
+      height={px}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      data-icon={name}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      focusable="false"
+    >
+      {PATHS[name]}
+    </svg>
+  )
+}

package/templates/nova/src/styles/NovaProvider.tsx

@@ -0,0 +1,91 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { createContext, useContext, useMemo, type CSSProperties, type ReactNode } from 'react'
+import { resolveTheme, type NovaThemeSettings } from './theme'
+import { BUILTIN_STRINGS, STRINGS_EN, type NovaStrings } from './strings'
+import './index.css'
+
+/**
+ * Where a component is rendering:
+ *   storefront — a shopper's page: an empty section renders nothing.
+ *   editor     — the Studio canvas: an empty section renders its setup frame
+ *                (Nova 14 · Editor states) so the merchant can fill it.
+ */
+export type NovaMode = 'storefront' | 'editor'
+
+export interface NovaContextValue {
+  readonly mode: NovaMode
+  readonly locale: string
+  readonly dir: 'ltr' | 'rtl'
+  readonly strings: NovaStrings
+  /** Current year, injectable so a copyright line is deterministic in tests. */
+  readonly year: number
+}
+
+const NovaContext = createContext<NovaContextValue>({
+  mode: 'storefront',
+  locale: 'en',
+  dir: 'ltr',
+  strings: STRINGS_EN,
+  year: 2026,
+})
+
+export function useNova(): NovaContextValue {
+  return useContext(NovaContext)
+}
+
+export interface NovaProviderProps {
+  mode?: NovaMode
+  /** BCP 47 language tag; drives `lang` and the built-in string set. */
+  locale?: string
+  /**
+   * The language the page's CONTENT is in (the store's, `ctx.locale.language`), when it differs from
+   * the interface strings' `locale` — a store language Nova ships no strings for falls back to
+   * English strings, but its merchant copy is still in its own language. Drives `lang` only.
+   */
+  lang?: string
+  dir?: 'ltr' | 'rtl'
+  /** Overrides for the system strings (a storefront passes its locale file). */
+  strings?: Partial<NovaStrings>
+  /** Global theme settings (Level 1). Defaults write nothing. */
+  theme?: NovaThemeSettings
+  year?: number
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * The scope every Nova tree renders inside: tokens + base styles, theme
+ * settings as CSS variables on this element, `lang` / `dir`, and the context
+ * components read their mode and strings from. Presentational: no data.
+ */
+export function NovaProvider({ mode = 'storefront', locale = 'en', lang, dir, strings, theme, year = 2026, className, children }: NovaProviderProps): JSX.Element {
+  const base = BUILTIN_STRINGS[locale.split('-')[0]] ?? STRINGS_EN
+  const resolvedDir = dir ?? (/^(ar|he|fa|ur)\b/.test(locale) ? 'rtl' : 'ltr')
+  const value = useMemo<NovaContextValue>(
+    () => ({ mode, locale, dir: resolvedDir, strings: { ...base, ...strings }, year }),
+    [mode, locale, resolvedDir, base, strings, year],
+  )
+  const { vars, attrs } = useMemo(() => resolveTheme(theme), [theme])
+  return (
+    <NovaContext.Provider value={value}>
+      <div
+        className={sxJoin(['nv-root', className].filter(Boolean).join(' '), sx(vars as CSSProperties))}
+        lang={lang || locale}
+        dir={resolvedDir}
+        data-mode={mode}
+        {...attrs}
+      >
+        {children}
+      </div>
+    </NovaContext.Provider>
+  )
+}
+
+/** The theme's root for the platform (ThemeDefinition.Provider): Nova's provider, fed the store's settings. */
+export function ThemeRoot({ mode, locale, contentLanguage, settings, children }: { mode: NovaMode; locale: string; contentLanguage?: string; settings: Readonly<Record<string, unknown>>; children: ReactNode }): JSX.Element {
+  return (
+    <NovaProvider mode={mode} locale={locale} lang={contentLanguage} theme={settings as NovaThemeSettings}>
+      {children}
+    </NovaProvider>
+  )
+}

package/templates/nova/src/styles/base.css

@@ -0,0 +1,142 @@
+/* ============================================================================
+ * Nova base — reset, type roles, focus, long scripts, RTL.
+ *
+ * Scoped to `.nv-root` (the NovaProvider element) plus the document
+ * defaults every storefront needs, so the lab can host Nova inside any page
+ * without leaking a reset into it. Values are tokens only.
+ * ============================================================================ */
+
+/* The storefront document: the page runs edge to edge (the browser's default
+   8px body margin framed every page in white). */
+html,
+body { margin: 0; padding: 0; }
+
+.nv-root,
+.nv-root *,
+.nv-root *::before,
+.nv-root *::after {
+  box-sizing: border-box;
+}
+
+.nv-root {
+  font-family: var(--font-body);
+  font-size: var(--type-body);
+  line-height: var(--leading-base);
+  color: var(--color-fg);
+  background: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
+}
+
+.nv-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd) {
+  margin: 0;
+  padding: 0;
+}
+.nv-root :where(ul, ol) { list-style: none; }
+.nv-root :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; }
+.nv-root :where(input, button, textarea, select) { font: inherit; color: inherit; }
+.nv-root :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
+.nv-root :where(a) { color: inherit; text-decoration: none; }
+
+/* Inline links are ALWAYS underlined (02 · Link): inside running copy the
+   underline is the only thing that says "link". */
+.nv-root :where(p a, .nv-prose a) {
+  text-decoration: underline;
+  text-underline-offset: var(--underline-offset);
+  text-decoration-thickness: var(--border-width);
+  transition: text-decoration-thickness var(--duration-fast) var(--ease-standard);
+}
+.nv-root :where(p a, .nv-prose a):hover { text-decoration-thickness: 2px; }
+
+/* Heading roles — the ladder is in tokens.css; weight is the global
+   headingWeight setting; h6 is always one step heavier (01 typeRules). */
+.nv-root :where(h1, h2, h3, h4, h5, h6, .nv-h1, .nv-h2, .nv-h3, .nv-h4, .nv-display) {
+  font-family: var(--font-display);
+  font-weight: var(--weight-heading);
+  color: inherit;
+  text-wrap: balance;
+}
+.nv-root :where(.nv-display) { font-size: var(--type-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
+.nv-root :where(.nv-h1) { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
+.nv-root :where(.nv-h2) { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
+.nv-root :where(.nv-h3) { font-size: var(--type-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
+.nv-root :where(.nv-h4) { font-size: var(--type-h4); line-height: var(--leading-h4); }
+.nv-root :where(p) { text-wrap: pretty; }
+
+.nv-root :where(.nv-eyebrow) {
+  font-size: var(--type-label);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+  color: var(--color-fg-muted);
+}
+
+/* Prices, quantities and counts are tabular everywhere. */
+.nv-root :where(.nv-tabular) { font-variant-numeric: tabular-nums; }
+
+/* Focus is ALWAYS a 2px ring at 2px offset in the fixed focus blue — never
+   the brand, so it cannot vanish into a brand fill. */
+.nv-root :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.nv-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Directional glyphs mirror in RTL. */
+[dir='rtl'] .nv-dir { transform: scaleX(-1); }
+
+/* ── Long scripts (01 typeRules · Round 2 · D17) ───────────────────────────
+   Thai: taller line boxes, tracking 0, no uppercase, never split a cluster. */
+.nv-root:lang(th),
+.nv-root :lang(th) { letter-spacing: 0; }
+.nv-root:lang(th) :where(p, li, dd, .nv-prose),
+.nv-root :lang(th) :where(p, li, dd, .nv-prose) { line-height: var(--leading-body-script); }
+.nv-root:lang(th) :where(h1, h2, h3, .nv-display, .nv-h1, .nv-h2, .nv-h3),
+.nv-root :lang(th) :where(h1, h2, h3, .nv-display, .nv-h1, .nv-h2, .nv-h3) { line-height: var(--leading-h4); letter-spacing: 0; }
+.nv-root:lang(th) :where(p, li, h1, h2, h3, h4, h5, h6, .nv-btn),
+.nv-root :lang(th) :where(p, li, h1, h2, h3, h4, h5, h6, .nv-btn) {
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  line-break: strict;
+  text-transform: none;
+}
+
+/* RTL: layout mirrors through logical properties; leading 1.7+, tracking 0. */
+.nv-root[dir='rtl'],
+.nv-root [dir='rtl'] { letter-spacing: 0; }
+.nv-root[dir='rtl'] :where(p, li, dd, .nv-prose) { line-height: var(--leading-body-script); }
+.nv-root[dir='rtl'] :where(h1, h2, h3, .nv-display, .nv-h1, .nv-h2, .nv-h3) { line-height: var(--leading-h4); letter-spacing: 0; }
+/* Merchant text keeps its own direction through <bdi> in the markup (the text
+   elements that render merchant or store text, and each RichText paragraph),
+   so "Halden & Co." keeps its period on an Arabic storefront while the element
+   keeps the page direction and alignment. Deliberately not a page-wide
+   unicode-bidi rule: that flipped the theme's own strings, prices and counts
+   (a bare "١٢", "English غير متاحة…") to LTR. */
+
+/* The skip link — first focusable thing on every page (12A header guardrail). */
+.nv-skip-link {
+  position: absolute;
+  inset-inline-start: var(--space-4);
+  top: var(--space-2);
+  z-index: var(--z-skip-link);
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-popover);
+  transform: translateY(-200%);
+}
+.nv-skip-link:focus-visible { transform: none; }
+.nv-scroll-lock, .nv-scroll-lock body { overflow: hidden; }

package/templates/nova/src/styles/blocks.css

@@ -0,0 +1,6 @@
+/* Blocks carry no outer margins; the parent owns spacing by pair (04C). */
+.nv-block { min-width: 0; margin: 0; }
+.nv-block[data-align='left'] { text-align: start; }
+.nv-block[data-align='center'] { text-align: center; }
+.nv-block[data-align='right'] { text-align: end; }
+.nv-block__eyebrow { margin-bottom: var(--space-2); }

package/templates/nova/src/styles/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.