create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/scripts/parity/pages.tsx

@@ -0,0 +1,123 @@
+/**
+ * Parity pages (dev-only; scripts/ is outside the platform build).
+ *
+ * For each page type the stories of the sections its template places (templates/<name>.json, in
+ * template order), wrapped by the Header and Footer stories. `story` is the section's primary story
+ * (Playground, the default args), except where the template's route fixes the data the story varies
+ * (named per entry). The same table drives both renders:
+ *   - the "storybook" render (main.tsx) draws each story with its own args;
+ *   - emit.ts turns each story's args into a ContentRevision node (settings + handles + blocks)
+ *     and the story fixtures into recorded ABI wire answers, so the ABI host renders the same content.
+ */
+import { createElement, type ComponentType, type ReactNode } from 'react'
+import type { CaseModule, StoryObj } from '../../tests/support/case'
+import * as Header from '../../tests/cases/sections/layout/header/Header.cases'
+import * as Footer from '../../tests/cases/sections/layout/footer/Footer.cases'
+import * as Hero from '../../tests/cases/sections/marketing/hero/Hero.cases'
+import * as FeaturedCollection from '../../tests/cases/sections/commerce/featured-collection/FeaturedCollection.cases'
+import * as CollectionList from '../../tests/cases/sections/commerce/collection-list/CollectionList.cases'
+import * as ImageWithText from '../../tests/cases/sections/content/image-with-text/ImageWithText.cases'
+import * as Testimonials from '../../tests/cases/sections/trust/testimonials/Testimonials.cases'
+import * as FeatureHighlights from '../../tests/cases/sections/content/feature-highlights/FeatureHighlights.cases'
+import * as Breadcrumbs from '../../tests/cases/sections/layout/breadcrumbs/Breadcrumbs.cases'
+import * as MainCollection from '../../tests/cases/sections/commerce/main-collection/MainCollection.cases'
+import * as ProductDetails from '../../tests/cases/sections/commerce/product-details/ProductDetails.cases'
+import * as TrustBadges from '../../tests/cases/sections/trust/trust-badges/TrustBadges.cases'
+import * as ProductRecommendations from '../../tests/cases/sections/commerce/product-recommendations/ProductRecommendations.cases'
+import * as CartItems from '../../tests/cases/sections/utility/cart-items/CartItems.cases'
+import * as Account from '../../tests/cases/sections/utility/account/Account.cases'
+import * as SearchResults from '../../tests/cases/sections/utility/search-results/SearchResultsSection.cases'
+
+export interface Entry {
+  /** section type (theme.config id) */
+  type: string
+  mod: CaseModule
+  /** named story; default Playground */
+  story?: string
+  /**
+   * Draw with the component itself, not the meta's `render` — the Header meta wraps the header in a
+   * placeholder "page below" that is context only, not part of the section.
+   */
+  bare?: boolean
+}
+
+export interface ParityPage {
+  name: string
+  /** path on the ABI host */
+  path: string
+  /** template name (templates/<template>.json) */
+  template: string
+  sections: Entry[]
+}
+
+const m = (x: unknown) => x as CaseModule
+
+export const HEADER: Entry = { type: 'header', mod: m(Header), bare: true }
+export const FOOTER: Entry = { type: 'footer', mod: m(Footer) }
+
+export const PAGES: ParityPage[] = [
+  {
+    name: 'home', path: '/', template: 'index',
+    sections: [
+      { type: 'hero', mod: m(Hero) },
+      { type: 'featured-collection', mod: m(FeaturedCollection) },
+      { type: 'collection-list', mod: m(CollectionList) },
+      { type: 'image-with-text', mod: m(ImageWithText) },
+      { type: 'testimonials', mod: m(Testimonials) },
+      { type: 'feature-highlights', mod: m(FeatureHighlights) },
+    ],
+  },
+  {
+    name: 'collection', path: '/collections/kitchen-table', template: 'collection',
+    sections: [
+      { type: 'breadcrumbs', mod: m(Breadcrumbs) },
+      { type: 'main-collection', mod: m(MainCollection) },
+    ],
+  },
+  {
+    name: 'product', path: '/products/washed-linen-duvet-cover', template: 'product',
+    sections: [
+      // the product route's trail (the Playground draws a collection trail)
+      { type: 'breadcrumbs', mod: m(Breadcrumbs), story: 'Product' },
+      { type: 'product-details', mod: m(ProductDetails) },
+      { type: 'trust-badges', mod: m(TrustBadges) },
+      { type: 'product-recommendations', mod: m(ProductRecommendations) },
+    ],
+  },
+  {
+    name: 'cart', path: '/cart', template: 'cart',
+    sections: [
+      { type: 'cart-items', mod: m(CartItems) },
+      { type: 'trust-badges', mod: m(TrustBadges) },
+      { type: 'featured-collection', mod: m(FeaturedCollection) },
+    ],
+  },
+  { name: 'account', path: '/account', template: 'account', sections: [{ type: 'account', mod: m(Account) }] },
+  { name: 'search', path: '/search?q=linen', template: 'search', sections: [{ type: 'search-results', mod: m(SearchResults) }] },
+]
+
+export function storyOf(e: Entry): StoryObj {
+  const s = e.mod[e.story ?? 'Playground'] as StoryObj | undefined
+  if (!s) throw new Error(`${e.type}: no story ${e.story ?? 'Playground'}`)
+  return s
+}
+
+/** The args a story renders with: meta args under the story's own (the workbench rule). */
+export function argsOf(e: Entry): Record<string, unknown> {
+  return { ...(e.mod.default.args ?? {}), ...(storyOf(e).args ?? {}) } as Record<string, unknown>
+}
+
+/** One story, drawn the way the workbench draws it (story render → meta render → component). */
+export function drawStory(e: Entry): ReactNode {
+  const story = storyOf(e)
+  const meta = e.mod.default
+  const args = argsOf(e)
+  const ctx = { args, globals: {}, parameters: { ...(meta.parameters ?? {}), ...(story.parameters ?? {}) }, canvasElement: null as unknown as HTMLElement }
+  const draw = story.render ?? (e.bare ? undefined : meta.render)
+  let Current = () => (draw ? draw(args as never, ctx as never) : createElement(meta.component as ComponentType<Record<string, unknown>>, args)) as JSX.Element
+  for (const dec of [...(story.decorators ?? []), ...(meta.decorators ?? [])]) {
+    const Inner = Current
+    Current = () => dec(Inner, ctx as never) as JSX.Element
+  }
+  return createElement(Current)
+}

package/templates/nova/scripts/parity/vite.config.ts

@@ -0,0 +1,29 @@
+/**
+ * Dev-only Vite config for the parity pages (`/scripts/parity/index.html?page=home`) and for
+ * `vite-node scripts/parity/emit.ts`. Root = the theme, so the contracts' `/.tanqory/...` glob resolves.
+ * The cases' `support/case` import is redirected to a shim without vitest / testing-library.
+ */
+import { defineConfig, type Plugin } from 'vite'
+import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const theme = join(here, '..', '..')
+const shim = join(here, 'case-shim.ts')
+
+const caseShim = (): Plugin => ({
+  name: 'parity-case-shim',
+  enforce: 'pre',
+  async resolveId(id, importer) {
+    if (!importer || importer === shim) return null
+    if (/(^|\/)support\/case$/.test(id) && /\/tests\/cases\//.test(importer)) return shim
+    return null
+  },
+})
+
+export default defineConfig({
+  root: theme,
+  plugins: [caseShim(), react()],
+  server: { port: 4420, strictPort: true },
+})

package/templates/nova/src/components/base/Accordion.css

@@ -0,0 +1,20 @@
+.nv-accordion { border-top: var(--border-subtle); }
+.nv-accordion__item { border-bottom: var(--border-subtle); }
+.nv-accordion__heading { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; }
+.nv-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  width: 100%;
+  min-height: var(--row-height-md);
+  padding-block: var(--space-3);
+  text-align: start;
+  font-size: var(--type-body);
+  font-weight: var(--weight-medium);
+  color: inherit;
+}
+.nv-accordion__panel:not([hidden]) { animation: nv-accordion-in var(--duration-base) var(--ease-standard); }
+.nv-accordion__body { padding-bottom: var(--space-4); color: var(--color-fg-muted); max-width: 60ch; }
+[data-nv-surface='inverse'] .nv-accordion__body { color: inherit; opacity: 0.8; }
+@keyframes nv-accordion-in { from { opacity: 0; transform: translateY(-4px); } }

package/templates/nova/src/components/base/Accordion.tsx

@@ -0,0 +1,50 @@
+import { useId, useState, type ReactNode } from 'react'
+import { Icon } from '../../styles/Icon'
+import './Accordion.css'
+
+/**
+ * Nova 02 · Accordion (Disclosure) — 56px rows (--row-height-md), hairline
+ * between, + / − glyph, 200ms grid-rows open (instant under reduced motion).
+ * The trigger is a real <button aria-expanded> inside a heading so the rows
+ * stay in the document outline.
+ */
+export interface AccordionItemProps {
+  title: ReactNode
+  children: ReactNode
+  /** Uncontrolled initial state. */
+  defaultOpen?: boolean
+  /** Controlled state (with onOpenChange). */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Heading level wrapping the trigger. */
+  level?: 2 | 3 | 4 | 5 | 6
+}
+
+export function AccordionItem({ title, children, defaultOpen = false, open, onOpenChange, level = 3 }: AccordionItemProps): JSX.Element {
+  const [inner, setInner] = useState(defaultOpen)
+  const isOpen = open ?? inner
+  const id = useId()
+  const H = `h${level}` as 'h3'
+  const toggle = () => {
+    const next = !isOpen
+    if (open === undefined) setInner(next)
+    onOpenChange?.(next)
+  }
+  return (
+    <div className="nv-accordion__item" data-open={isOpen ? '' : undefined}>
+      <H className="nv-accordion__heading">
+        <button type="button" className="nv-accordion__trigger" aria-expanded={isOpen} aria-controls={`${id}-panel`} id={`${id}-trigger`} onClick={toggle}>
+          <span className="nv-accordion__title">{title}</span>
+          <Icon name={isOpen ? 'minus' : 'plus'} size="sm" />
+        </button>
+      </H>
+      <div className="nv-accordion__panel" id={`${id}-panel`} role="region" aria-labelledby={`${id}-trigger`} hidden={!isOpen}>
+        <div className="nv-accordion__body">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export function Accordion({ children, className }: { children: ReactNode; className?: string }): JSX.Element {
+  return <div className={['nv-accordion', className].filter(Boolean).join(' ')}>{children}</div>
+}

package/templates/nova/src/components/base/Badge.css

@@ -0,0 +1,17 @@
+.nv-badge {
+  --badge-ink: var(--color-fg);
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-badge);
+  font-size: var(--type-label);
+  font-weight: var(--weight-medium);
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.nv-badge[data-tone='sale'] { --badge-ink: var(--color-sale); background: var(--color-sale); color: var(--color-sale-contrast); }
+.nv-badge[data-tone='new'] { background: var(--color-bg); color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-border); }
+.nv-badge[data-tone='sold-out'] { --badge-ink: var(--color-fg-muted); background: var(--color-bg-muted); color: var(--color-fg-muted); }
+.nv-badge[data-tone='low-stock'] { --badge-ink: var(--color-warning-ink); background: var(--color-warning-surface); color: var(--color-warning-ink); }
+.nv-badge[data-tone='custom'] { background: var(--color-bg-inverse); color: var(--color-fg-inverse); }

package/templates/nova/src/components/base/Badge.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import './Badge.css'
+
+/**
+ * Nova 02 · Badge — sale · new · sold-out · low-stock · custom. Always text,
+ * never a colour dot alone. Shape = global badgeShape; treatment = badgeStyle
+ * (filled | outline). Max one per card; priority sold out > sale > custom > new.
+ */
+export type BadgeTone = 'sale' | 'new' | 'sold-out' | 'low-stock' | 'custom'
+
+export function Badge({ tone = 'custom', children }: { tone?: BadgeTone; children: ReactNode }): JSX.Element {
+  return (
+    <span className="nv-badge" data-tone={tone}>
+      {children}
+    </span>
+  )
+}
+
+/** Which one badge a card shows (Nova 02 priority). */
+export function pickBadge(b: { soldOut?: boolean; sale?: boolean; custom?: string | null; isNew?: boolean }): BadgeTone | null {
+  if (b.soldOut) return 'sold-out'
+  if (b.sale) return 'sale'
+  if (b.custom) return 'custom'
+  if (b.isNew) return 'new'
+  return null
+}

package/templates/nova/src/components/base/Button.css

@@ -0,0 +1,73 @@
+.nv-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: var(--btn-height);
+  padding: var(--space-2) var(--btn-pad-x);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--btn-radius);
+  font-family: var(--font-body);
+  font-size: var(--type-button);
+  font-weight: var(--btn-font-weight);
+  line-height: var(--leading-tight);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard), text-decoration-thickness var(--duration-fast) var(--ease-standard);
+}
+.nv-btn__label { overflow-wrap: anywhere; }
+.nv-btn--block { display: flex; width: 100%; }
+
+.nv-btn[data-size='sm'] { min-height: var(--btn-height-sm); padding-inline: var(--btn-pad-x-sm); font-size: var(--type-button-sm); }
+/* sm keeps a 44px hit area through invisible padding (Nova 02). */
+.nv-btn[data-size='sm']::after { content: ''; position: absolute; inset: -4px 0; }
+.nv-btn[data-size='lg'] { min-height: var(--btn-height-lg); padding-inline: var(--btn-pad-x-lg); font-size: var(--type-button-lg); }
+
+.nv-btn[data-variant='primary'] { background: var(--color-button); color: var(--color-button-text); }
+.nv-btn[data-variant='primary']:hover { background: var(--color-button-hover); color: var(--color-button-hover-text); }
+.nv-btn[data-variant='primary']:active { background: var(--color-button-active); }
+/* Nova 13 · destructive — the confirm action of an irreversible decision only (Delete address). */
+.nv-btn[data-variant='destructive'] { background: var(--color-danger); color: var(--color-bg); }
+.nv-btn[data-variant='destructive']:hover { filter: brightness(0.9); }
+.nv-btn[data-variant='destructive']:active { filter: brightness(0.8); }
+
+.nv-btn[data-variant='secondary'] { background: transparent; color: var(--color-fg); border-color: var(--color-border-input); }
+.nv-btn[data-variant='secondary']:hover { border-color: var(--color-border-emphasis); }
+.nv-btn[data-variant='secondary']:active { background: var(--color-bg-muted); }
+
+.nv-btn[data-variant='ghost'] { background: var(--color-bg-muted); color: var(--color-fg); }
+.nv-btn[data-variant='ghost']:hover { background: var(--color-bg-muted-hover); }
+.nv-btn[data-variant='ghost']:active { background: var(--color-bg-muted-active); }
+
+.nv-btn[data-variant='tertiary'] {
+  min-height: var(--touch-target);
+  padding-inline: 0;
+  background: transparent;
+  color: var(--color-fg);
+  border-radius: var(--radius-sm);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: var(--underline-offset-lg);
+}
+.nv-btn[data-variant='tertiary']:hover { text-decoration-color: currentColor; }
+.nv-btn[data-variant='tertiary']:active { color: var(--color-fg-muted); }
+
+.nv-btn:disabled:not([data-loading]),
+.nv-btn[aria-disabled='true'] {
+  background: var(--color-bg-muted);
+  color: var(--color-fg-subtle);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.nv-btn[data-variant='secondary']:disabled:not([data-loading]) { background: transparent; border-color: var(--color-border); }
+.nv-btn[data-variant='tertiary']:disabled { background: transparent; }
+.nv-btn[data-loading] { cursor: progress; }
+
+/* On inverse surfaces the primary flips to the page colour. */
+[data-nv-surface='inverse'] .nv-btn[data-variant='primary'] { background: var(--color-fg-inverse); color: var(--color-bg-inverse); }
+[data-nv-surface='inverse'] .nv-btn[data-variant='secondary'] { color: var(--color-fg-inverse); border-color: var(--color-fg-inverse); }
+[data-nv-surface='inverse'] :is(.nv-btn[data-variant='tertiary'], .nv-btn[data-variant='ghost']) { color: var(--color-fg-inverse); }
+[data-nv-surface='inverse'] .nv-btn[data-variant='ghost'] { background: var(--color-border-inverse); }

package/templates/nova/src/components/base/Button.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { Spinner } from './Spinner'
+import './Button.css'
+
+/**
+ * Nova 02 · Button — primary (brand fill) · secondary (3:1 input-grey border) ·
+ * tertiary (underlined text) · ghost (muted "soft" fill). sm 36 · md 44 · lg 52,
+ * padding 14 · 20 · 28, radius = buttonRadius. Labels wrap to two lines rather
+ * than truncate; sm keeps a 44px hit area via invisible padding.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+interface Common {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /** Shows a spinner, keeps the width, announces busy. */
+  loading?: boolean
+  /** Stretch to the container (e.g. a lone button at 390). */
+  block?: boolean
+  iconStart?: ReactNode
+  iconEnd?: ReactNode
+  children: ReactNode
+}
+
+export type ButtonProps = Common & ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined }
+export type ButtonLinkProps = Common & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+
+function classes(block?: boolean, extra?: string) {
+  return ['nv-btn', block ? 'nv-btn--block' : '', extra].filter(Boolean).join(' ')
+}
+
+export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps | ButtonLinkProps>(function Button(props, ref) {
+  const { variant = 'primary', size = 'md', loading, block, iconStart, iconEnd, children, className, ...rest } = props
+  const inner = (
+    <>
+      {loading ? <Spinner size="sm" /> : iconStart}
+      <span className="nv-btn__label">{children}</span>
+      {!loading && iconEnd}
+    </>
+  )
+  const data = { 'data-variant': variant, 'data-size': size, 'data-loading': loading ? '' : undefined }
+  if ('href' in rest && rest.href !== undefined) {
+    return (
+      <a ref={ref as React.Ref<HTMLAnchorElement>} className={classes(block, className)} {...data} {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}>
+        {inner}
+      </a>
+    )
+  }
+  const b = rest as ButtonHTMLAttributes<HTMLButtonElement>
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      type={b.type ?? 'button'}
+      className={classes(block, className)}
+      aria-busy={loading || undefined}
+      {...data}
+      {...b}
+      disabled={b.disabled || loading}
+    >
+      {inner}
+    </button>
+  )
+})

package/templates/nova/src/components/base/Checkbox.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react'
+import type { ChoiceProps } from './choice-props'
+import './choice.css'
+
+/** Nova 02 · Checkbox — off · on · mixed · disabled · required/invalid. Box on the 3:1 input grey. */
+export function Checkbox({ label, indeterminate, invalid, className, ...rest }: ChoiceProps): JSX.Element {
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = Boolean(indeterminate)
+  }, [indeterminate])
+  return (
+    <label className={['nv-choice', className].filter(Boolean).join(' ')} data-kind="checkbox" data-invalid={invalid ? '' : undefined}>
+      <input ref={ref} type="checkbox" className="nv-choice__input" aria-invalid={invalid || undefined} {...rest} />
+      <span className="nv-choice__box" aria-hidden />
+      <span className="nv-choice__label">{label}</span>
+    </label>
+  )
+}

package/templates/nova/src/components/base/Chip.css

@@ -0,0 +1,20 @@
+.nv-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 36px;
+  padding-inline: var(--space-4);
+  border-radius: var(--input-radius);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  box-shadow: inset 0 0 0 1px var(--color-border);
+  font-size: var(--type-body-sm);
+  font-weight: var(--weight-medium);
+  transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
+}
+.nv-chip::after { content: ''; position: absolute; inset: -4px 0; }
+.nv-chip:hover { box-shadow: inset 0 0 0 1px var(--color-border-emphasis); }
+.nv-chip[data-selected] { background: var(--color-brand); color: var(--color-brand-contrast); box-shadow: none; }
+.nv-chip[data-removable] { background: var(--color-bg-muted); box-shadow: none; }
+.nv-chip:disabled { color: var(--color-fg-subtle); box-shadow: inset 0 0 0 1px var(--color-border); background: transparent; cursor: not-allowed; }

package/templates/nova/src/components/base/Chip.tsx

@@ -0,0 +1,33 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Icon } from '../../styles/Icon'
+import './Chip.css'
+
+/**
+ * Nova 02 · Chip — default · selected · removable · disabled. 36px visual,
+ * 44px hit area; radius follows inputCorners.
+ */
+export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  selected?: boolean
+  /** Shows × and makes the whole chip a "remove" control. */
+  onRemove?: () => void
+  removeLabel?: string
+  children: ReactNode
+}
+
+export function Chip({ selected, onRemove, removeLabel, children, className, onClick, ...rest }: ChipProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      className={['nv-chip', className].filter(Boolean).join(' ')}
+      aria-pressed={onRemove ? undefined : selected}
+      aria-label={onRemove && removeLabel ? removeLabel : undefined}
+      data-selected={selected ? '' : undefined}
+      data-removable={onRemove ? '' : undefined}
+      onClick={onRemove ?? onClick}
+      {...rest}
+    >
+      <span>{children}</span>
+      {onRemove && <Icon name="close" size="sm" />}
+    </button>
+  )
+}

package/templates/nova/src/components/base/Divider.css

@@ -0,0 +1,6 @@
+.nv-divider__line { display: block; height: var(--nv-div-thickness, 1px); background: var(--nv-div-color, var(--color-border)); }
+[data-tone='strong'].nv-divider__line, [data-tone='strong'] > .nv-divider__line { --nv-div-color: var(--color-fg); }
+[data-thickness='2'].nv-divider__line, [data-thickness='2'] > .nv-divider__line { --nv-div-thickness: 2px; }
+.nv-divider__labelled { display: flex; align-items: center; gap: var(--space-4); }
+.nv-divider__labelled .nv-divider__line { flex: 1; }
+.nv-divider__label { max-width: 40ch; font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1.4; color: var(--color-fg-muted); text-align: center; }

package/templates/nova/src/components/base/Divider.tsx

@@ -0,0 +1,28 @@
+import './Divider.css'
+
+/**
+ * A hairline rule, optionally with a centred label (12/500 muted, max 40ch)
+ * that makes it a chapter break. Decorative: role="separator"; the label is
+ * plain text, never a heading. Colour and weight come from `tone` /
+ * `thickness`, or from a host that sets --nv-div-color / --nv-div-thickness.
+ */
+export interface DividerProps {
+  label?: string
+  tone?: 'subtle' | 'strong'
+  thickness?: 1 | 2
+}
+
+export function Divider({ label, tone, thickness }: DividerProps): JSX.Element {
+  const text = label?.trim()
+  const data = { 'data-tone': tone, 'data-thickness': thickness === 2 ? '2' : undefined }
+  if (text) {
+    return (
+      <div className="nv-divider__labelled" role="separator" aria-label={text} {...data}>
+        <span className="nv-divider__line" />
+        <span className="nv-divider__label">{text}</span>
+        <span className="nv-divider__line" />
+      </div>
+    )
+  }
+  return <div className="nv-divider__line" role="separator" {...data} />
+}

package/templates/nova/src/components/base/IconButton.css

@@ -0,0 +1,34 @@
+.nv-icon-btn {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--touch-target);
+  height: var(--touch-target);
+  border-radius: var(--radius-circle);
+  color: inherit;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.nv-icon-btn:hover { background: var(--color-bg-muted); }
+.nv-icon-btn:disabled { color: var(--color-fg-subtle); background: transparent; cursor: not-allowed; }
+.nv-icon-btn[data-variant='outlined'] { box-shadow: inset 0 0 0 1px var(--color-border); background: var(--color-bg); }
+.nv-icon-btn[data-variant='on-media'] { background: var(--color-bg); box-shadow: var(--shadow-floating); color: var(--color-fg); }
+.nv-icon-btn__count {
+  position: absolute;
+  top: 5px;
+  inset-inline-end: 3px;
+  min-width: 17px;
+  height: 17px;
+  padding-inline: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand);
+  color: var(--color-brand-contrast);
+  font-size: 10px;
+  font-weight: var(--weight-strong);
+  line-height: 17px;
+  text-align: center;
+}
+/* On an ink surface the count flips to white on ink (12A · inverse header). */
+[data-nv-surface='inverse'] .nv-icon-btn__count { background: var(--color-fg-inverse); color: var(--color-bg-inverse); }
+[data-nv-surface='inverse'] .nv-icon-btn:hover,
+[data-nv-surface='overlay'] .nv-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }

package/templates/nova/src/components/base/IconButton.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+import { Icon, type IconName } from '../../styles/Icon'
+import './IconButton.css'
+
+/**
+ * Nova 02 · IconButton — 44×44 target, 20px glyph. `label` is REQUIRED: it is
+ * the accessible name (never rely on the glyph). Variants: plain · outlined ·
+ * on-media. `count` renders the 17px badge (header cart).
+ */
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  icon: IconName
+  label: string
+  variant?: 'plain' | 'outlined' | 'on-media'
+  count?: number
+  /** Accessible name when a count shows, e.g. "Cart, 2 items". Defaults to label. */
+  countLabel?: string
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { icon, label, variant = 'plain', count, countLabel, className, type = 'button', ...rest },
+  ref,
+) {
+  const showCount = typeof count === 'number' && count > 0
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={['nv-icon-btn', className].filter(Boolean).join(' ')}
+      data-variant={variant}
+      aria-label={showCount && countLabel ? countLabel : label}
+      {...rest}
+    >
+      <Icon name={icon} size="md" />
+      {showCount && (
+        <span className="nv-icon-btn__count nv-tabular" aria-hidden>
+          {count > 99 ? '99+' : count}
+        </span>
+      )}
+    </button>
+  )
+})

package/templates/nova/src/components/base/Input.css

@@ -0,0 +1,21 @@
+.nv-input {
+  width: 100%;
+  min-height: var(--input-height-md);
+  padding: var(--space-2) var(--input-pad-x);
+  border: var(--input-border);
+  border-radius: var(--input-radius);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-size: var(--type-body);
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.nv-input::placeholder { color: var(--color-fg-subtle); }
+.nv-input:hover { border-color: var(--color-border-emphasis); }
+.nv-input:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
+.nv-input[data-size='lg'] { min-height: var(--input-height-lg); font-size: 1rem; }
+.nv-input[aria-invalid='true'] { border-color: var(--color-danger); }
+.nv-input:disabled { background: var(--color-bg-muted); border-color: transparent; color: var(--color-fg-subtle); cursor: not-allowed; }
+
+.nv-input-wrap { position: relative; display: block; }
+.nv-input-wrap > .nv-icon { position: absolute; inset-inline-start: var(--input-pad-x); top: 50%; translate: 0 -50%; color: var(--color-fg-muted); pointer-events: none; }
+.nv-input-wrap > .nv-input { padding-inline-start: calc(var(--input-pad-x) + 24px); }

package/templates/nova/src/components/base/Input.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { Icon, type IconName } from '../../styles/Icon'
+import './Input.css'
+
+/**
+ * Nova 02 · Input — 44 (md) / 52 (lg: 16px text for search, account and
+ * checkout, no iOS zoom). Border = the 3:1 input grey; radius = inputCorners.
+ * Label, help and error come from FormField (never placeholder-only).
+ */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: 'md' | 'lg'
+  icon?: IconName
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({ size = 'md', icon, className, ...rest }, ref): JSX.Element {
+  const input = <input ref={ref} className={['nv-input', className].filter(Boolean).join(' ')} data-size={size} {...rest} />
+  if (!icon) return input
+  return (
+    <span className="nv-input-wrap" data-size={size}>
+      <Icon name={icon} size="sm" />
+      {input}
+    </span>
+  )
+})