@forumone/create-throughline 0.2.1 → 0.3.1

package/dist/templates/with-reference-ds/design-system/src/foundations/_helpers.tsx

@@ -0,0 +1,82 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+/** Shared layout chrome for every Foundations page. */
+export function FoundationPage({
+  title,
+  intro,
+  children,
+}: {
+  title: string
+  intro?: string
+  children: ReactNode
+}) {
+  return (
+    <div
+      style={{
+        fontFamily: 'var(--font-family-sans)',
+        color: 'var(--color-text-primary)',
+        background: 'var(--color-bg-primary)',
+        padding: '2rem',
+        maxWidth: '64rem',
+      }}
+    >
+      <h1 style={{ fontSize: 'var(--font-size-4xl)', margin: '0 0 0.5rem', lineHeight: 1.15 }}>
+        {title}
+      </h1>
+      {intro ? (
+        <p
+          style={{
+            color: 'var(--color-text-secondary)',
+            margin: '0 0 2rem',
+            maxWidth: '42rem',
+            lineHeight: 'var(--line-height-relaxed)',
+          }}
+        >
+          {intro}
+        </p>
+      ) : null}
+      {children}
+    </div>
+  )
+}
+
+const cell: CSSProperties = {
+  textAlign: 'left',
+  padding: '0.5rem 0.75rem',
+  borderBottom: '1px solid var(--color-border-default)',
+  verticalAlign: 'middle',
+}
+
+/** A simple token reference table: name, resolved value, and a preview cell. */
+export function TokenTable({
+  rows,
+}: {
+  rows: Array<{ name: string; value: string; preview?: ReactNode }>
+}) {
+  return (
+    <table
+      style={{
+        borderCollapse: 'collapse',
+        width: '100%',
+        fontSize: 'var(--font-size-sm)',
+      }}
+    >
+      <thead>
+        <tr>
+          <th style={{ ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }}>Token</th>
+          <th style={{ ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }}>Value</th>
+          <th style={{ ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }}>Preview</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.name}>
+            <td style={{ ...cell, fontFamily: 'var(--font-family-mono)' }}>{row.name}</td>
+            <td style={{ ...cell, color: 'var(--color-text-secondary)' }}>{row.value}</td>
+            <td style={cell}>{row.preview}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/dist/templates/with-reference-ds/design-system/src/index.ts

@@ -0,0 +1,14 @@
+export { Hero, type HeroProps, type HeroVariant, type HeroBackground } from './components/Hero/index.js'
+export { SectionIntro, type SectionIntroProps, type SectionIntroAlignment } from './components/SectionIntro/index.js'
+export { Prose, type ProseProps, type ProseSize } from './components/Prose/index.js'
+export { MediaBlock, type MediaBlockProps, type MediaBlockAspect, type MediaBlockMedia } from './components/MediaBlock/index.js'
+export { Card, type CardProps } from './components/Card/index.js'
+export { CardGrid, type CardGridProps, type CardGridColumns } from './components/CardGrid/index.js'
+export { CTASection, type CTASectionProps, type CTASectionBackground } from './components/CTASection/index.js'
+export { Stats, type StatsProps, type StatItem } from './components/Stats/index.js'
+export { FAQ, type FAQProps, type FAQItem } from './components/FAQ/index.js'
+export { Quote, type QuoteProps, type QuoteSize } from './components/Quote/index.js'
+export { Divider, type DividerProps, type DividerSpacing } from './components/Divider/index.js'
+export { Spacer, type SpacerProps, type SpacerSize } from './components/Spacer/index.js'
+
+export * as tokens from './tokens/index.js'

package/dist/templates/with-reference-ds/design-system/src/styles/base.css

@@ -0,0 +1,55 @@
+/* Base element styles applied on top of reset.css + tokens.css. */
+
+html {
+  font-family: var(--font-family-sans);
+  font-size: 16px;
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+}
+
+body {
+  font-size: var(--font-size-base);
+}
+
+h1 {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+a {
+  color: var(--color-brand-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+a:hover {
+  color: var(--color-brand-primary-hover);
+}
+
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  background: var(--color-bg-tertiary);
+  padding: 0.125em 0.25em;
+  border-radius: var(--radius-sm);
+}

package/dist/templates/with-reference-ds/design-system/src/styles/reset.css

@@ -0,0 +1,48 @@
+/* Minimal reset — based on modern-normalize with a few opinionated extras. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+img,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-brand-primary);
+  outline-offset: 2px;
+}

package/dist/templates/with-reference-ds/design-system/src/styles/tokens.css

@@ -0,0 +1,116 @@
+/* Auto-generated by scripts/build-tokens-css.ts. Do not edit by hand. */
+
+:root {
+  /* Colors */
+  --color-neutral-0: #FFFFFF;
+  --color-neutral-50: #FAFAFA;
+  --color-neutral-100: #F4F4F5;
+  --color-neutral-200: #E4E4E7;
+  --color-neutral-300: #D4D4D8;
+  --color-neutral-400: #A1A1AA;
+  --color-neutral-500: #71717A;
+  --color-neutral-600: #52525B;
+  --color-neutral-700: #3F3F46;
+  --color-neutral-800: #27272A;
+  --color-neutral-900: #18181B;
+  --color-neutral-1000: #000000;
+  --color-brand-primary: #2563EB;
+  --color-brand-primary-hover: #1D4ED8;
+  --color-brand-secondary: #0891B2;
+  --color-text-primary: #18181B;
+  --color-text-secondary: #52525B;
+  --color-text-muted: #71717A;
+  --color-text-inverse: #FFFFFF;
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #FAFAFA;
+  --color-bg-tertiary: #F4F4F5;
+  --color-bg-inverse: #18181B;
+  --color-border-default: #E4E4E7;
+  --color-border-strong: #D4D4D8;
+  --color-state-success: #16A34A;
+  --color-state-warning: #CA8A04;
+  --color-state-error: #DC2626;
+  --color-state-info: #2563EB;
+
+  /* Typography */
+  --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-family-mono: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-tight: 1.15;
+  --line-height-snug: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.65;
+  --line-height-loose: 1.8;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-px: 1px;
+  --spacing-0-5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-section: 5rem;
+  --spacing-container: 1.5rem;
+
+  /* Radii */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Layout & Containers */
+  --layout-container-sm: 40rem;
+  --layout-container-md: 64rem;
+  --layout-container-lg: 80rem;
+  --layout-gutter: 1.5rem;
+  --layout-margin: 1rem;
+  --layout-breakpoint-sm: 40rem;
+  --layout-breakpoint-md: 48rem;
+  --layout-breakpoint-lg: 64rem;
+  --layout-breakpoint-xl: 80rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary: #FAFAFA;
+    --color-text-secondary: #A1A1AA;
+    --color-text-muted: #71717A;
+    --color-bg-primary: #18181B;
+    --color-bg-secondary: #27272A;
+    --color-bg-tertiary: #3F3F46;
+    --color-bg-inverse: #FAFAFA;
+    --color-border-default: #3F3F46;
+    --color-border-strong: #52525B;
+  }
+}

package/dist/templates/with-reference-ds/design-system/src/tokens/colors.ts

@@ -0,0 +1,54 @@
+export const colors = {
+  'color.neutral.0': '#FFFFFF',
+  'color.neutral.50': '#FAFAFA',
+  'color.neutral.100': '#F4F4F5',
+  'color.neutral.200': '#E4E4E7',
+  'color.neutral.300': '#D4D4D8',
+  'color.neutral.400': '#A1A1AA',
+  'color.neutral.500': '#71717A',
+  'color.neutral.600': '#52525B',
+  'color.neutral.700': '#3F3F46',
+  'color.neutral.800': '#27272A',
+  'color.neutral.900': '#18181B',
+  'color.neutral.1000': '#000000',
+
+  'color.brand.primary': '#2563EB',
+  'color.brand.primaryHover': '#1D4ED8',
+  'color.brand.secondary': '#0891B2',
+
+  'color.text.primary': '#18181B',
+  'color.text.secondary': '#52525B',
+  'color.text.muted': '#71717A',
+  'color.text.inverse': '#FFFFFF',
+
+  'color.bg.primary': '#FFFFFF',
+  'color.bg.secondary': '#FAFAFA',
+  'color.bg.tertiary': '#F4F4F5',
+  'color.bg.inverse': '#18181B',
+
+  'color.border.default': '#E4E4E7',
+  'color.border.strong': '#D4D4D8',
+
+  'color.state.success': '#16A34A',
+  'color.state.warning': '#CA8A04',
+  'color.state.error': '#DC2626',
+  'color.state.info': '#2563EB',
+} as const
+
+/**
+ * Tokens that swap under `prefers-color-scheme: dark`. Keys match the base
+ * palette; values replace the light defaults when the media query applies.
+ */
+export const darkOverrides = {
+  'color.text.primary': '#FAFAFA',
+  'color.text.secondary': '#A1A1AA',
+  'color.text.muted': '#71717A',
+  'color.bg.primary': '#18181B',
+  'color.bg.secondary': '#27272A',
+  'color.bg.tertiary': '#3F3F46',
+  'color.bg.inverse': '#FAFAFA',
+  'color.border.default': '#3F3F46',
+  'color.border.strong': '#52525B',
+} as const
+
+export type ColorToken = keyof typeof colors

package/dist/templates/with-reference-ds/design-system/src/tokens/index.ts

@@ -0,0 +1,32 @@
+import { colors, darkOverrides } from './colors.js'
+import { typography } from './typography.js'
+import { spacing } from './spacing.js'
+import { radii } from './radii.js'
+import { layout } from './layout.js'
+
+export { colors, darkOverrides, typography, spacing, radii, layout }
+export type { ColorToken } from './colors.js'
+export type { TypographyToken } from './typography.js'
+export type { SpacingToken } from './spacing.js'
+export type { RadiusToken } from './radii.js'
+export type { LayoutToken } from './layout.js'
+
+export const allTokens = {
+  ...colors,
+  ...typography,
+  ...spacing,
+  ...radii,
+  ...layout,
+} as const
+
+export type TokenName = keyof typeof allTokens
+
+/** Returns every token in the shape the design-contract manifest expects. */
+export function getTokenList() {
+  const categorize = (name: string) => name.split('.')[0] ?? 'other'
+  return Object.entries(allTokens).map(([name, value]) => ({
+    name,
+    value,
+    category: categorize(name),
+  }))
+}

package/dist/templates/with-reference-ds/design-system/src/tokens/layout.ts

@@ -0,0 +1,26 @@
+/**
+ * Layout & container tokens: the max-widths a page constrains to, the
+ * horizontal gutter/margins, and the responsive breakpoints. These are the
+ * values the "Layout & Containers" foundation documents. Brand projects
+ * override them (e.g. Forum One uses constrain 800/1440/2200, gutter 40,
+ * breakpoints 320–1400); the reference DS ships neutral defaults.
+ */
+export const layout = {
+  /** Container max-widths the page content constrains to. */
+  'layout.container.sm': '40rem', // 640px — narrow prose
+  'layout.container.md': '64rem', // 1024px — default content width
+  'layout.container.lg': '80rem', // 1280px — wide / full-bleed sections
+
+  /** Horizontal gutter between grid columns. */
+  'layout.gutter': '1.5rem', // 24px
+  /** Page side margins (inside the viewport, outside the container). */
+  'layout.margin': '1rem', // 16px
+
+  /** Responsive breakpoints (min-width). */
+  'layout.breakpoint.sm': '40rem', // 640px
+  'layout.breakpoint.md': '48rem', // 768px
+  'layout.breakpoint.lg': '64rem', // 1024px
+  'layout.breakpoint.xl': '80rem', // 1280px
+} as const
+
+export type LayoutToken = keyof typeof layout

package/dist/templates/with-reference-ds/design-system/src/tokens/radii.ts

@@ -0,0 +1,11 @@
+export const radii = {
+  'radius.none': '0',
+  'radius.sm': '0.25rem',
+  'radius.md': '0.375rem',
+  'radius.lg': '0.5rem',
+  'radius.xl': '0.75rem',
+  'radius.2xl': '1rem',
+  'radius.full': '9999px',
+} as const
+
+export type RadiusToken = keyof typeof radii

package/dist/templates/with-reference-ds/design-system/src/tokens/spacing.ts

@@ -0,0 +1,26 @@
+export const spacing = {
+  'spacing.0': '0',
+  'spacing.px': '1px',
+  'spacing.0.5': '0.125rem',
+  'spacing.1': '0.25rem',
+  'spacing.2': '0.5rem',
+  'spacing.3': '0.75rem',
+  'spacing.4': '1rem',
+  'spacing.5': '1.25rem',
+  'spacing.6': '1.5rem',
+  'spacing.8': '2rem',
+  'spacing.10': '2.5rem',
+  'spacing.12': '3rem',
+  'spacing.16': '4rem',
+  'spacing.20': '5rem',
+  'spacing.24': '6rem',
+  'spacing.32': '8rem',
+  'spacing.40': '10rem',
+  'spacing.48': '12rem',
+  /** Semantic: default vertical padding inside a page section. */
+  'spacing.section': '5rem',
+  /** Semantic: horizontal gutter inside the page container. */
+  'spacing.container': '1.5rem',
+} as const
+
+export type SpacingToken = keyof typeof spacing

package/dist/templates/with-reference-ds/design-system/src/tokens/typography.ts

@@ -0,0 +1,32 @@
+export const typography = {
+  'font.family.sans': 'Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+  'font.family.mono': 'ui-monospace, "SF Mono", Monaco, Consolas, monospace',
+
+  'font.size.xs': '0.75rem',
+  'font.size.sm': '0.875rem',
+  'font.size.base': '1rem',
+  'font.size.lg': '1.125rem',
+  'font.size.xl': '1.25rem',
+  'font.size.2xl': '1.5rem',
+  'font.size.3xl': '1.875rem',
+  'font.size.4xl': '2.25rem',
+  'font.size.5xl': '3rem',
+  'font.size.6xl': '3.75rem',
+
+  'font.weight.normal': '400',
+  'font.weight.medium': '500',
+  'font.weight.semibold': '600',
+  'font.weight.bold': '700',
+
+  'line.height.tight': '1.15',
+  'line.height.snug': '1.3',
+  'line.height.normal': '1.5',
+  'line.height.relaxed': '1.65',
+  'line.height.loose': '1.8',
+
+  'letter.spacing.tight': '-0.025em',
+  'letter.spacing.normal': '0',
+  'letter.spacing.wide': '0.025em',
+} as const
+
+export type TypographyToken = keyof typeof typography

package/dist/templates/with-reference-ds/design-system/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "dist",
+    "storybook-static",
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ]
+}

package/dist/templates/with-reference-ds/design-system/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}'],
+    passWithNoTests: true,
+    css: {
+      modules: { classNameStrategy: 'non-scoped' },
+    },
+  },
+})

package/dist/templates/with-reference-ds/design-system/vitest.setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})

package/dist/templates/without-reference-ds/design-system/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/foundations/**/*.stories.@(ts|tsx)',
+    '../src/components/**/*.stories.@(ts|tsx)',
+  ],
+  addons: ['@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+
+export default config

package/dist/templates/without-reference-ds/design-system/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i },
+    },
+    a11y: {
+      config: {},
+      options: {},
+      manual: false,
+    },
+  },
+}
+
+export default preview

package/dist/templates/without-reference-ds/design-system/README.md

@@ -0,0 +1,20 @@
+# Design system
+
+An empty Storybook authoring environment for your own design system. Bring your components here.
+
+```
+src/
+  components/    One folder per component: .tsx, .module.css, .stories.tsx, .contract.ts
+  foundations/   Storybook "Foundations" pages documenting your tokens
+.storybook/      Storybook (react-vite) config
+```
+
+## Commands
+
+```bash
+pnpm --filter "./design-system" storybook         # author at http://localhost:6006
+pnpm --filter "./design-system" build-storybook   # static Storybook
+pnpm --filter "./design-system" typecheck
+```
+
+Point the Components MCP server at your manifest in `apps/web/src/payload.config.ts` (`componentsPlugin({ manifest })`) once you generate one. For a worked starting point, re-scaffold with the reference design system.

package/dist/templates/without-reference-ds/design-system/gitignore

@@ -0,0 +1,5 @@
+dist
+storybook-static
+node_modules
+*.tsbuildinfo
+.turbo

package/dist/templates/without-reference-ds/design-system/package.json.template

@@ -0,0 +1,33 @@
+{
+  "name": "{{designSystemName}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo storybook-static *.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.3.5",
+    "typescript": "^5.6.0",
+    "vite": "^8.0.9"
+  }
+}