diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css index baf1c18..cff557c 100644 --- a/apps/docs/app/global.css +++ b/apps/docs/app/global.css @@ -8,6 +8,32 @@ @theme { --font-sans: var(--font-karla), ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-fraunces), ui-serif, Georgia, serif; + --font-heading: var(--font-sans); + + --color-background: oklch(1 0 0); + --color-foreground: oklch(0.145 0 0); + --color-card: oklch(1 0 0); + --color-card-foreground: oklch(0.145 0 0); + --color-popover: oklch(1 0 0); + --color-popover-foreground: oklch(0.145 0 0); + --color-primary: oklch(0.205 0 0); + --color-primary-foreground: oklch(0.985 0 0); + --color-secondary: oklch(0.97 0 0); + --color-secondary-foreground: oklch(0.205 0 0); + --color-muted: oklch(0.97 0 0); + --color-muted-foreground: oklch(0.556 0 0); + --color-accent: oklch(0.97 0 0); + --color-accent-foreground: oklch(0.205 0 0); + --color-destructive: oklch(0.577 0.245 27.325); + --color-border: oklch(0.922 0 0); + --color-input: oklch(0.922 0 0); + --color-ring: oklch(0.708 0 0); + --color-chart-1: oklch(0.646 0.222 41.116); + --color-chart-2: oklch(0.6 0.118 184.704); + --color-chart-3: oklch(0.398 0.07 227.392); + --color-chart-4: oklch(0.828 0.189 84.429); + --color-chart-5: oklch(0.769 0.188 70.08); + --color-sidebar: oklch(0.985 0 0); } /* Campfire palette, sampled from the logo: ember flame, espresso logs, diff --git a/apps/docs/components/registry/slide-frame.tsx b/apps/docs/components/registry/slide-frame.tsx index 49d080c..d002467 100644 --- a/apps/docs/components/registry/slide-frame.tsx +++ b/apps/docs/components/registry/slide-frame.tsx @@ -5,25 +5,13 @@ import { type ReactNode, useEffect, useRef, useState } from "react"; const CANVAS_WIDTH = 1280; const CANVAS_HEIGHT = 720; -// Default campfire theme, matching the init template. Previews keep the -// slide's own (light) theme and typography regardless of the docs color -// scheme and brand fonts. const SLIDE_FONT = "ui-sans-serif, system-ui, sans-serif"; const SLIDE_THEME = { - "--color-background": "oklch(1 0 0)", - "--color-foreground": "oklch(0.15 0 0)", - "--color-primary": "oklch(0.55 0.2 260)", - "--color-muted": "oklch(0.55 0.02 260)", "--font-sans": SLIDE_FONT, - "--font-display": SLIDE_FONT, + "--font-heading": SLIDE_FONT, } as React.CSSProperties; -/** - * Renders registry items on the same fixed 1280x720 logical canvas the - * campfire shell uses, scaled down to fit the docs column. Items can rely - * on slide-scale typography (text-8xl etc.) and still preview correctly. - */ export function SlideFrame({ children }: { children: ReactNode }) { const containerRef = useRef(null); const [scale, setScale] = useState(0); @@ -45,7 +33,7 @@ export function SlideFrame({ children }: { children: ReactNode }) { return (
diff --git a/apps/docs/content/docs/theme.mdx b/apps/docs/content/docs/theme.mdx index 192f2c9..326b2c5 100644 --- a/apps/docs/content/docs/theme.mdx +++ b/apps/docs/content/docs/theme.mdx @@ -36,6 +36,7 @@ slides/* content ``` The slide canvas uses `--color-background` / `--color-foreground` as its -base colors, so dark decks are one token away. +base colors and `--font-sans` as its base typeface, so dark decks and +custom fonts are one token away. Multiple switchable themes are intentionally out of scope for v1. diff --git a/apps/docs/public/r/agenda.json b/apps/docs/public/r/agenda.json index d4b0f53..32dbc6b 100644 --- a/apps/docs/public/r/agenda.json +++ b/apps/docs/public/r/agenda.json @@ -9,13 +9,13 @@ "files": [ { "path": "items/agenda.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AgendaLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** What the talk covers. Pair with the AgendaItem component:\n *\n * ```mdx\n * \n * \n * ```\n */\nexport default function AgendaLayout({\n title,\n className,\n children,\n ...props\n}: AgendaLayoutProps) {\n return (\n \n {title ? (\n

{title}

\n ) : null}\n \n {children}\n
\n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AgendaLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** What the talk covers. Pair with the AgendaItem component:\n *\n * ```mdx\n * \n * \n * ```\n */\nexport default function AgendaLayout({\n title,\n className,\n children,\n ...props\n}: AgendaLayoutProps) {\n return (\n \n {title ? (\n

\n {title}\n

\n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/agenda.tsx" }, { "path": "items/agenda-item.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AgendaItemProps = ComponentProps<\"div\"> & {\n /** The item marker, e.g. 1 or \"01\". */\n number: number | string;\n /** What this part of the talk covers. */\n heading: string;\n};\n\n/** A numbered row for agenda slides. Pairs with the agenda layout. */\nexport default function AgendaItem({\n number,\n heading,\n className,\n children,\n ...props\n}: AgendaItemProps) {\n return (\n \n \n {number}\n \n
\n \n {heading}\n \n {children ? (\n \n {children}\n
\n ) : null}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AgendaItemProps = ComponentProps<\"div\"> & {\n /** The item marker, e.g. 1 or \"01\". */\n number: number | string;\n /** What this part of the talk covers. */\n heading: string;\n};\n\n/** A numbered row for agenda slides. Pairs with the agenda layout. */\nexport default function AgendaItem({\n number,\n heading,\n className,\n children,\n ...props\n}: AgendaItemProps) {\n return (\n \n \n {number}\n \n
\n \n {heading}\n \n {children ? (\n \n {children}\n
\n ) : null}\n \n \n );\n}\n", "type": "registry:component", "target": "components/agenda-item.tsx" } diff --git a/apps/docs/public/r/callout.json b/apps/docs/public/r/callout.json index 42c8ae0..ecd4b91 100644 --- a/apps/docs/public/r/callout.json +++ b/apps/docs/public/r/callout.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/callout.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CalloutTone = \"default\" | \"primary\" | \"warning\";\n\nconst toneStyles: Record = {\n default: \"border-(--color-foreground)/15 bg-(--color-foreground)/[0.04]\",\n primary: \"border-(--color-primary)/40 bg-(--color-primary)/10\",\n warning: \"border-amber-500/40 bg-amber-500/10\",\n};\n\nexport type CalloutProps = ComponentProps<\"aside\"> & {\n /** Visual emphasis of the aside. */\n tone?: CalloutTone;\n};\n\n/** An emphasized aside with tone variants. */\nexport default function Callout({\n tone = \"default\",\n className,\n ...props\n}: CalloutProps) {\n return (\n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CalloutTone = \"default\" | \"primary\" | \"warning\";\n\nconst toneStyles: Record = {\n default: \"border-foreground/15 bg-foreground/[0.04]\",\n primary: \"border-primary/40 bg-primary/10\",\n warning: \"border-amber-500/40 bg-amber-500/10\",\n};\n\nexport type CalloutProps = ComponentProps<\"aside\"> & {\n /** Visual emphasis of the aside. */\n tone?: CalloutTone;\n};\n\n/** An emphasized aside with tone variants. */\nexport default function Callout({\n tone = \"default\",\n className,\n ...props\n}: CalloutProps) {\n return (\n \n );\n}\n", "type": "registry:component", "target": "components/callout.tsx" } diff --git a/apps/docs/public/r/closing.json b/apps/docs/public/r/closing.json index 0895525..193c324 100644 --- a/apps/docs/public/r/closing.json +++ b/apps/docs/public/r/closing.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/closing.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ClosingLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** Centered thank-you slide. */\nexport default function ClosingLayout({\n title,\n className,\n children,\n ...props\n}: ClosingLayoutProps) {\n return (\n \n {title ? (\n

{title}

\n ) : null}\n \n {children}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ClosingLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** Centered thank-you slide. */\nexport default function ClosingLayout({\n title,\n className,\n children,\n ...props\n}: ClosingLayoutProps) {\n return (\n \n {title ? (\n

\n {title}\n

\n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/closing.tsx" } diff --git a/apps/docs/public/r/metric-card.json b/apps/docs/public/r/metric-card.json index 109c404..e206462 100644 --- a/apps/docs/public/r/metric-card.json +++ b/apps/docs/public/r/metric-card.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/metric-card.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MetricCardProps = ComponentProps<\"div\"> & {\n /** The headline number, e.g. \"42%\". */\n value: string;\n /** What the number measures. */\n label: string;\n /** Optional change indicator rendered beside the value, e.g. \"+18%\". */\n delta?: string;\n};\n\n/** A headline number with label and optional delta. */\nexport default function MetricCard({\n value,\n label,\n delta,\n className,\n ...props\n}: MetricCardProps) {\n return (\n \n \n {value}\n {delta ? (\n \n {delta}\n \n ) : null}\n \n \n {label}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MetricCardProps = ComponentProps<\"div\"> & {\n /** The headline number, e.g. \"42%\". */\n value: string;\n /** What the number measures. */\n label: string;\n /** Optional change indicator rendered beside the value, e.g. \"+18%\". */\n delta?: string;\n};\n\n/** A headline number with label and optional delta. */\nexport default function MetricCard({\n value,\n label,\n delta,\n className,\n ...props\n}: MetricCardProps) {\n return (\n \n \n \n {value}\n \n {delta ? (\n \n {delta}\n \n ) : null}\n \n \n {label}\n \n \n );\n}\n", "type": "registry:component", "target": "components/metric-card.tsx" } diff --git a/apps/docs/public/r/problem-solution.json b/apps/docs/public/r/problem-solution.json index 54cde8e..8f0a4a6 100644 --- a/apps/docs/public/r/problem-solution.json +++ b/apps/docs/public/r/problem-solution.json @@ -9,19 +9,19 @@ "files": [ { "path": "items/problem-solution.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ProblemSolutionLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** Pair with the Problem and Solution components installed alongside:\n *\n * ```mdx\n * Decks rot in proprietary tools.\n * Slides are files; the repo is the deck.\n * ```\n */\nexport default function ProblemSolutionLayout({\n title,\n className,\n children,\n ...props\n}: ProblemSolutionLayoutProps) {\n return (\n \n {title ? (\n

{title}

\n ) : null}\n \n {children}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ProblemSolutionLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** Pair with the Problem and Solution components installed alongside:\n *\n * ```mdx\n * Decks rot in proprietary tools.\n * Slides are files; the repo is the deck.\n * ```\n */\nexport default function ProblemSolutionLayout({\n title,\n className,\n children,\n ...props\n}: ProblemSolutionLayoutProps) {\n return (\n \n {title ? (\n

\n {title}\n

\n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/problem-solution.tsx" }, { "path": "items/problem.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ProblemProps = ComponentProps<\"section\">;\n\n/** The \"before\" panel of a problem/solution narrative. */\nexport default function Problem({\n className,\n children,\n ...props\n}: ProblemProps) {\n return (\n \n \n Problem\n \n
{children}
\n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ProblemProps = ComponentProps<\"section\">;\n\n/** The \"before\" panel of a problem/solution narrative. */\nexport default function Problem({\n className,\n children,\n ...props\n}: ProblemProps) {\n return (\n \n \n Problem\n \n
{children}
\n \n );\n}\n", "type": "registry:component", "target": "components/problem.tsx" }, { "path": "items/solution.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SolutionProps = ComponentProps<\"section\">;\n\n/** The \"after\" panel of a problem/solution narrative. */\nexport default function Solution({\n className,\n children,\n ...props\n}: SolutionProps) {\n return (\n \n \n Solution\n \n
{children}
\n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SolutionProps = ComponentProps<\"section\">;\n\n/** The \"after\" panel of a problem/solution narrative. */\nexport default function Solution({\n className,\n children,\n ...props\n}: SolutionProps) {\n return (\n \n \n Solution\n \n
{children}
\n \n );\n}\n", "type": "registry:component", "target": "components/solution.tsx" } diff --git a/apps/docs/public/r/quote-card.json b/apps/docs/public/r/quote-card.json index e6af070..9f69f67 100644 --- a/apps/docs/public/r/quote-card.json +++ b/apps/docs/public/r/quote-card.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/quote-card.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type QuoteCardProps = ComponentProps<\"figure\"> & {\n /** The quotation, rendered with typographic quotes. */\n quote: string;\n /** Who said it. */\n author: string;\n /** Optional role or affiliation of the author. */\n affiliation?: string;\n};\n\n/** A large quotation with attribution. */\nexport default function QuoteCard({\n quote,\n author,\n affiliation,\n className,\n ...props\n}: QuoteCardProps) {\n return (\n \n \n “{quote}”\n \n \n {author}\n {affiliation ? {affiliation} : null}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type QuoteCardProps = ComponentProps<\"figure\"> & {\n /** The quotation, rendered with typographic quotes. */\n quote: string;\n /** Who said it. */\n author: string;\n /** Optional role or affiliation of the author. */\n affiliation?: string;\n};\n\n/** A large quotation with attribution. */\nexport default function QuoteCard({\n quote,\n author,\n affiliation,\n className,\n ...props\n}: QuoteCardProps) {\n return (\n \n \n “{quote}”\n \n \n {author}\n {affiliation ? {affiliation} : null}\n \n \n );\n}\n", "type": "registry:component", "target": "components/quote-card.tsx" } diff --git a/apps/docs/public/r/section.json b/apps/docs/public/r/section.json index 098584e..ca7f9a4 100644 --- a/apps/docs/public/r/section.json +++ b/apps/docs/public/r/section.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/section.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SectionLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** A full-bleed divider slide on the primary color. */\nexport default function SectionLayout({\n title,\n className,\n children,\n ...props\n}: SectionLayoutProps) {\n return (\n \n {title ? (\n

{title}

\n ) : null}\n \n {children}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SectionLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** A full-bleed divider slide on the primary color. */\nexport default function SectionLayout({\n title,\n className,\n children,\n ...props\n}: SectionLayoutProps) {\n return (\n \n {title ? (\n

\n {title}\n

\n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/section.tsx" } diff --git a/apps/docs/public/r/split.json b/apps/docs/public/r/split.json index aa25606..8a1c5fe 100644 --- a/apps/docs/public/r/split.json +++ b/apps/docs/public/r/split.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/split.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SplitLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** The two-column workhorse: children flow into equal side-by-side panels. */\nexport default function SplitLayout({\n title,\n className,\n children,\n ...props\n}: SplitLayoutProps) {\n return (\n \n {title ? (\n

{title}

\n ) : null}\n \n {children}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SplitLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** The two-column workhorse: children flow into equal side-by-side panels. */\nexport default function SplitLayout({\n title,\n className,\n children,\n ...props\n}: SplitLayoutProps) {\n return (\n \n {title ? (\n

\n {title}\n

\n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/split.tsx" } diff --git a/apps/docs/public/r/statement.json b/apps/docs/public/r/statement.json index d0e13d4..74b7c06 100644 --- a/apps/docs/public/r/statement.json +++ b/apps/docs/public/r/statement.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/statement.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StatementLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter, rendered as an eyebrow. */\n title?: string;\n};\n\n/** One big takeaway, centered. Also the natural home for a QuoteCard. */\nexport default function StatementLayout({\n title,\n className,\n children,\n ...props\n}: StatementLayoutProps) {\n return (\n \n {title ? (\n \n {title}\n \n ) : null}\n \n {children}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StatementLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter, rendered as an eyebrow. */\n title?: string;\n};\n\n/** One big takeaway, centered. Also the natural home for a QuoteCard. */\nexport default function StatementLayout({\n title,\n className,\n children,\n ...props\n}: StatementLayoutProps) {\n return (\n \n {title ? (\n \n {title}\n \n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/statement.tsx" } diff --git a/apps/docs/public/r/step.json b/apps/docs/public/r/step.json index c2b2f25..46a567a 100644 --- a/apps/docs/public/r/step.json +++ b/apps/docs/public/r/step.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/step.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StepProps = ComponentProps<\"div\"> & {\n /** The step marker rendered in the badge. */\n number: number | string;\n /** Step heading. */\n heading: string;\n};\n\n/** A numbered step with heading and optional detail. */\nexport default function Step({\n number,\n heading,\n className,\n children,\n ...props\n}: StepProps) {\n return (\n \n \n {number}\n \n
\n \n {heading}\n \n {children ? (\n \n {children}\n
\n ) : null}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StepProps = ComponentProps<\"div\"> & {\n /** The step marker rendered in the badge. */\n number: number | string;\n /** Step heading. */\n heading: string;\n};\n\n/** A numbered step with heading and optional detail. */\nexport default function Step({\n number,\n heading,\n className,\n children,\n ...props\n}: StepProps) {\n return (\n \n \n {number}\n \n
\n \n {heading}\n \n {children ? (\n \n {children}\n
\n ) : null}\n \n \n );\n}\n", "type": "registry:component", "target": "components/step.tsx" } diff --git a/apps/docs/public/r/team-member.json b/apps/docs/public/r/team-member.json index f73bf9c..b15e9ce 100644 --- a/apps/docs/public/r/team-member.json +++ b/apps/docs/public/r/team-member.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/team-member.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TeamMemberProps = ComponentProps<\"figure\"> & {\n /** Full name. */\n name: string;\n /** Optional role, e.g. \"CEO & Co-founder\". */\n position?: string;\n /** Optional photo URL; falls back to initials. */\n src?: string;\n};\n\nconst WHITESPACE = /\\s+/;\n\nfunction initials(name: string): string {\n return name\n .split(WHITESPACE)\n .filter(Boolean)\n .map((part) => part[0])\n .slice(0, 2)\n .join(\"\")\n .toUpperCase();\n}\n\n/** A person card for team slides: photo (or initials), name, and role. */\nexport default function TeamMember({\n name,\n position,\n src,\n className,\n children,\n ...props\n}: TeamMemberProps) {\n return (\n \n {src ? (\n \n ) : (\n \n {initials(name)}\n \n )}\n
\n \n {name}\n \n {position ? (\n \n {position}\n \n ) : null}\n {children ? (\n \n {children}\n \n ) : null}\n
\n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TeamMemberProps = ComponentProps<\"figure\"> & {\n /** Full name. */\n name: string;\n /** Optional role, e.g. \"CEO & Co-founder\". */\n position?: string;\n /** Optional photo URL; falls back to initials. */\n src?: string;\n};\n\nconst WHITESPACE = /\\s+/;\n\nfunction initials(name: string): string {\n return name\n .split(WHITESPACE)\n .filter(Boolean)\n .map((part) => part[0])\n .slice(0, 2)\n .join(\"\")\n .toUpperCase();\n}\n\n/** A person card for team slides: photo (or initials), name, and role. */\nexport default function TeamMember({\n name,\n position,\n src,\n className,\n children,\n ...props\n}: TeamMemberProps) {\n return (\n \n {src ? (\n \n ) : (\n \n {initials(name)}\n \n )}\n
\n \n {name}\n \n {position ? (\n \n {position}\n \n ) : null}\n {children ? (\n \n {children}\n \n ) : null}\n
\n \n );\n}\n", "type": "registry:component", "target": "components/team-member.tsx" } diff --git a/apps/docs/public/r/timeline.json b/apps/docs/public/r/timeline.json index 8a2aead..6e9ae1f 100644 --- a/apps/docs/public/r/timeline.json +++ b/apps/docs/public/r/timeline.json @@ -15,7 +15,7 @@ }, { "path": "items/timeline-item.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TimelineItemProps = ComponentProps<\"li\"> & {\n /** Milestone heading. */\n heading: string;\n /** Optional time marker, e.g. \"Q3 2026\". */\n period?: string;\n};\n\n/** A single milestone on a Timeline. */\nexport default function TimelineItem({\n heading,\n period,\n className,\n children,\n ...props\n}: TimelineItemProps) {\n return (\n \n
\n \n \n
\n
\n {period ? (\n \n {period}\n \n ) : null}\n \n {heading}\n \n {children ? (\n \n {children}\n
\n ) : null}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TimelineItemProps = ComponentProps<\"li\"> & {\n /** Milestone heading. */\n heading: string;\n /** Optional time marker, e.g. \"Q3 2026\". */\n period?: string;\n};\n\n/** A single milestone on a Timeline. */\nexport default function TimelineItem({\n heading,\n period,\n className,\n children,\n ...props\n}: TimelineItemProps) {\n return (\n \n
\n \n \n
\n
\n {period ? (\n \n {period}\n \n ) : null}\n \n {heading}\n \n {children ? (\n \n {children}\n
\n ) : null}\n \n \n );\n}\n", "type": "registry:component", "target": "components/timeline-item.tsx" } diff --git a/apps/docs/public/r/title.json b/apps/docs/public/r/title.json index 2857bd8..b4343ef 100644 --- a/apps/docs/public/r/title.json +++ b/apps/docs/public/r/title.json @@ -9,7 +9,7 @@ "files": [ { "path": "items/title.tsx", - "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TitleLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** Opening slide: oversized title with supporting copy. */\nexport default function TitleLayout({\n title,\n className,\n children,\n ...props\n}: TitleLayoutProps) {\n return (\n \n {title ? (\n

{title}

\n ) : null}\n \n {children}\n \n \n );\n}\n", + "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TitleLayoutProps = ComponentProps<\"main\"> & {\n /** From the slide's `title` frontmatter. */\n title?: string;\n};\n\n/** Opening slide: oversized title with supporting copy. */\nexport default function TitleLayout({\n title,\n className,\n children,\n ...props\n}: TitleLayoutProps) {\n return (\n \n {title ? (\n

\n {title}\n

\n ) : null}\n \n {children}\n \n \n );\n}\n", "type": "registry:file", "target": "layouts/title.tsx" } diff --git a/examples/basic/components/mdx.tsx b/examples/basic/components/mdx.tsx index fe718b8..9eee13d 100644 --- a/examples/basic/components/mdx.tsx +++ b/examples/basic/components/mdx.tsx @@ -6,21 +6,33 @@ import { cn } from "@/lib/utils"; export const mdxComponents = { h1: ({ className, ...props }: ComponentProps<"h1">) => (

), h2: ({ className, ...props }: ComponentProps<"h2">) => (

), h3: ({ className, ...props }: ComponentProps<"h3">) => ( -

+

), h4: ({ className, ...props }: ComponentProps<"h4">) => ( -

+

), p: ({ className, ...props }: ComponentProps<"p">) => (

@@ -63,10 +75,7 @@ export const mdxComponents = { /> ), a: ({ className, ...props }: ComponentProps<"a">) => ( - + ), strong: ({ className, ...props }: ComponentProps<"strong">) => ( diff --git a/examples/basic/components/metric-card.tsx b/examples/basic/components/metric-card.tsx index 5f608bd..0848efc 100644 --- a/examples/basic/components/metric-card.tsx +++ b/examples/basic/components/metric-card.tsx @@ -21,7 +21,7 @@ export default function MetricCard({ return (

{value} {delta ? ( {delta} diff --git a/examples/basic/components/problem.tsx b/examples/basic/components/problem.tsx index 982c5fb..002c2f3 100644 --- a/examples/basic/components/problem.tsx +++ b/examples/basic/components/problem.tsx @@ -12,13 +12,13 @@ export default function Problem({ return (
- + Problem
{children}
diff --git a/examples/basic/components/solution.tsx b/examples/basic/components/solution.tsx index a25a330..86806c0 100644 --- a/examples/basic/components/solution.tsx +++ b/examples/basic/components/solution.tsx @@ -12,13 +12,13 @@ export default function Solution({ return (
- + Solution
{children}
diff --git a/examples/basic/components/step.tsx b/examples/basic/components/step.tsx index c0e1e8c..b06b6a0 100644 --- a/examples/basic/components/step.tsx +++ b/examples/basic/components/step.tsx @@ -23,7 +23,7 @@ export default function Step({ {...props} > {number} diff --git a/examples/basic/layouts/section.tsx b/examples/basic/layouts/section.tsx index 1a38878..1b31521 100644 --- a/examples/basic/layouts/section.tsx +++ b/examples/basic/layouts/section.tsx @@ -16,7 +16,7 @@ export default function SectionLayout({ return (
) => (

), h2: ({ className, ...props }: ComponentProps<"h2">) => (

), h3: ({ className, ...props }: ComponentProps<"h3">) => ( -

+

), h4: ({ className, ...props }: ComponentProps<"h4">) => ( -

+

), p: ({ className, ...props }: ComponentProps<"p">) => (

@@ -63,10 +75,7 @@ export const mdxComponents = { /> ), a: ({ className, ...props }: ComponentProps<"a">) => ( - + ), strong: ({ className, ...props }: ComponentProps<"strong">) => ( diff --git a/packages/cli/templates/default/theme.css b/packages/cli/templates/default/theme.css index 2151094..f15c9ee 100644 --- a/packages/cli/templates/default/theme.css +++ b/packages/cli/templates/default/theme.css @@ -4,10 +4,66 @@ @source "./layouts"; @source "./components"; -@theme { - --font-sans: ui-sans-serif, system-ui, sans-serif; - --color-background: oklch(1 0 0); - --color-foreground: oklch(0.15 0 0); - --color-primary: oklch(0.55 0.2 260); - --color-muted: oklch(0.55 0.02 260); +@theme inline { + --font-heading: var(--font-sans); + --font-sans: var(--font-sans); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); } diff --git a/registry/items/agenda-item.tsx b/registry/items/agenda-item.tsx index 3135d53..97faaad 100644 --- a/registry/items/agenda-item.tsx +++ b/registry/items/agenda-item.tsx @@ -23,14 +23,14 @@ export default function AgendaItem({ {...props} > {number}

{heading} diff --git a/registry/items/agenda.tsx b/registry/items/agenda.tsx index 675420e..5a180e0 100644 --- a/registry/items/agenda.tsx +++ b/registry/items/agenda.tsx @@ -29,7 +29,9 @@ export default function AgendaLayout({ {...props} > {title ? ( -

{title}

+

+ {title} +

) : null}
= { - default: "border-(--color-foreground)/15 bg-(--color-foreground)/[0.04]", - primary: "border-(--color-primary)/40 bg-(--color-primary)/10", + default: "border-foreground/15 bg-foreground/[0.04]", + primary: "border-primary/40 bg-primary/10", warning: "border-amber-500/40 bg-amber-500/10", }; diff --git a/registry/items/closing.tsx b/registry/items/closing.tsx index 2b5605e..46cbc47 100644 --- a/registry/items/closing.tsx +++ b/registry/items/closing.tsx @@ -23,7 +23,9 @@ export default function ClosingLayout({ {...props} > {title ? ( -

{title}

+

+ {title} +

) : null}
- {value} + + {value} + {delta ? ( {delta} diff --git a/registry/items/problem-solution.tsx b/registry/items/problem-solution.tsx index 017d9d9..78c0874 100644 --- a/registry/items/problem-solution.tsx +++ b/registry/items/problem-solution.tsx @@ -26,7 +26,9 @@ export default function ProblemSolutionLayout({ {...props} > {title ? ( -

{title}

+

+ {title} +

) : null}
- + Problem
{children}
diff --git a/registry/items/quote-card.tsx b/registry/items/quote-card.tsx index 49f171a..11bf42e 100644 --- a/registry/items/quote-card.tsx +++ b/registry/items/quote-card.tsx @@ -25,7 +25,7 @@ export default function QuoteCard({ {...props} >
“{quote}” diff --git a/registry/items/section.tsx b/registry/items/section.tsx index 1a38878..e040a75 100644 --- a/registry/items/section.tsx +++ b/registry/items/section.tsx @@ -16,14 +16,16 @@ export default function SectionLayout({ return (
{title ? ( -

{title}

+

+ {title} +

) : null}
- + Solution
{children}
diff --git a/registry/items/split.tsx b/registry/items/split.tsx index 22fd2f2..43d20ff 100644 --- a/registry/items/split.tsx +++ b/registry/items/split.tsx @@ -20,7 +20,9 @@ export default function SplitLayout({ {...props} > {title ? ( -

{title}

+

+ {title} +

) : null}
{title ? ( - + {title} ) : null}
{children} diff --git a/registry/items/step.tsx b/registry/items/step.tsx index c0e1e8c..60e6f2d 100644 --- a/registry/items/step.tsx +++ b/registry/items/step.tsx @@ -23,13 +23,16 @@ export default function Step({ {...props} > {number}
- + {heading} {children ? ( diff --git a/registry/items/team-member.tsx b/registry/items/team-member.tsx index fab0aee..f98f294 100644 --- a/registry/items/team-member.tsx +++ b/registry/items/team-member.tsx @@ -52,14 +52,17 @@ export default function TeamMember({ ) : ( {initials(name)} )}
- + {name} {position ? ( diff --git a/registry/items/timeline-item.tsx b/registry/items/timeline-item.tsx index 04ab9bb..2d4c350 100644 --- a/registry/items/timeline-item.tsx +++ b/registry/items/timeline-item.tsx @@ -24,22 +24,22 @@ export default function TimelineItem({ >
- +
{period ? ( {period} ) : null} {heading} diff --git a/registry/items/title.tsx b/registry/items/title.tsx index 5e75c49..b1964b9 100644 --- a/registry/items/title.tsx +++ b/registry/items/title.tsx @@ -23,7 +23,9 @@ export default function TitleLayout({ {...props} > {title ? ( -

{title}

+

+ {title} +

) : null}