@selorax/theme-packs

Curated theme packs for SeloraX — complete page sets (homepage + product + cart + landing etc.) bundled for first-paint onboarding. A pack is a polished starting point: a brand contract, a handful of pages, and the section types those pages reference. v1 ships 3 packs (minimal-saas, bold-ecommerce, business-services).

The editor consumes this package in two places:

1. OnboardingModal — a first-paint modal that appears the first time a merchant opens an empty project. Each pack is a big card with a name + description + "Use this" button. Click → the pack's brand contract, pages, and sections all land in the project.
2. "Browse themes" button — post-onboarding access, sitting next to "Browse library" in the page rail. Same modal, available any time.

Why a separate package

A theme pack is fundamentally different from a section library entry:

• Section library (@selorax/sections-library) — small reusable building blocks; ~28 entries; merchant picks one at a time.
• Theme packs (this package) — larger curated payloads (~5 pages + ~10-18 sections each); merchant adopts one as a starting point. Independent publish cadence, distinct authoring (a pack curator vs a section author), clean dependency direction (theme-packs can depend on sections-library for atom blocks, never the reverse).

Pack layout

packs/
  minimal-saas/
    pack.json                 # {id, name, description, screenshot?, pages[], sections[]}
    brand.md                  # the selorax.design.md preset (frontmatter + body)
    pages/
      index.html
      pricing.html
      about.html
      ...
    sections/
      hero-saas.html
      pricing-row.html
      ...
  bold-ecommerce/...
  business-services/...

pack.json lists every page and section explicitly — no filename-route magic.

{
  "id": "minimal-saas",
  "name": "Minimal SaaS",
  "description": "Clean, minimal SaaS landing — software/agency homepage with pricing and contact.",
  "screenshot": "",
  "pages": [
    { "filename": "index.html", "route": "/", "contentType": "html" }
  ],
  "sections": [
    { "filename": "hero-saas.html", "name": "hero-saas" }
  ]
}

The build script walks every packs/<id>/, reads pack.json, slurps the raw sources, and embeds the result into src/manifest.ts between the sentinel markers. Consumers import { PACKS } from '@selorax/theme-packs'.

Brand contract (brand.md)

brand.md is the per-pack selorax.design.md seed. It uses the standard frontmatter shape — palette + fonts (+ spacing in later iterations) — plus a markdown body describing the aesthetic. The pack's sections all reference {{ brand.* }} so they auto-theme to whichever brand contract is active (the pack's own when seeded, or the merchant's existing one if present).

---
palette:
  brand: '#0f172a'
  accent: '#3b82f6'
  ink: '#0f172a'
  bg: '#ffffff'
fonts:
  display: 'Inter'
  body: 'Inter'
---
# Minimal SaaS — brand contract

A clean, minimal SaaS aesthetic. Slate ink on white, blue accents for CTAs.

Authoring a pack

1. Create packs/<id>/ with a pack.json, brand.md, and pages/+sections/ sub-directories.
2. Write your pages as plain .html (or sections JSON, or TSX) — same authoring contract as a tenant-authored page.
3. Write your sections as plain section sources (header @settings+optional @slots then template body) — same authoring contract as a tenant section.
4. Every color / font reference in section bodies MUST go through {{ brand.* }} (the build script lints this via @selorax/design-quality to guarantee packs auto-theme correctly).
5. List every page + section in pack.json — the build script reads explicitly, no filename-route inference.
6. bun run build — regenerates src/manifest.ts, bundles dist/, hand-writes dist/index.d.ts.

Scripts

• bun run build — walk packs, embed into manifest, bundle to dist/, hand-write dist/index.d.ts.
• bun run test — schema/shape unit tests for the PACKS manifest.
• bun run typecheck — tsc --noEmit.
• bun run prepublishOnly — same as build; runs before npm publish.

Status

T1 (this commit) ships the scaffold + ONE placeholder pack (minimal-saas, 1 page + 1 hero section) to prove the build pipeline. T5–T7 of the A7 plan author the full 3-pack catalog (~15-20 files each).