upstream/upstream-shadcn-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
All checks were successful
Release / Create Version PR or Publish Stable Release (push) Has been skipped
Details
Release / Publish Prerelease to NPM (push) Has been skipped
Details
Monitor Registries / Monitor registry health (push) Has been skipped
Details

Browse Source
This commit is contained in:
upstream-mirror
2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
apps/v4/app/(app)/(create)/lib/api.ts Normal file
View File

@@ -0,0 +1,73 @@
import "server-only"
import { registryItemSchema } from "shadcn/schema"
import { BASES, getThemesForBaseColor, type BaseName } from "@/registry/config"
import {
ALLOWED_ITEM_TYPES,
EXCLUDED_ITEMS,
} from "@/app/(app)/(create)/lib/constants"
export async function getItemsForBase(base: BaseName) {
const { Index } = await import("@/registry/bases/__index__")
const index = Index[base]
if (!index) {
return []
}
return Object.values(index).filter(
(item) =>
ALLOWED_ITEM_TYPES.includes(item.type) &&
!EXCLUDED_ITEMS.includes(item.name)
)
}
export async function getBaseItem(name: string, base: BaseName) {
const { Index } = await import("@/registry/bases/__index__")
const index = Index[base]
if (!index?.[name] || EXCLUDED_ITEMS.includes(name)) {
return null
}
return registryItemSchema.parse(index[name])
}
export async function getBaseComponent(name: string, base: BaseName) {
const { Index } = await import("@/registry/bases/__index__")
const index = Index[base]
if (!index?.[name] || EXCLUDED_ITEMS.includes(name)) {
return null
}
const { getComponent } = await import("@/registry/bases/__components__")
return getComponent(base, name) ?? null
}
export async function getAllItems() {
const entries = await Promise.all(
BASES.map(async (base) => {
const items = await getItemsForBase(base.name as BaseName)
const filtered: Pick<
NonNullable<(typeof items)[number]>,
"name" | "title" | "type"
>[] = []
for (const item of items) {
if (item !== null && !/\d+$/.test(item.name)) {
filtered.push({
name: item.name,
title: item.title,
type: item.type,
})
}
}
return [base.name, filtered] as const
})
)
return Object.fromEntries(entries)
}
// Re-export for server-side use.
export { getThemesForBaseColor }

288
apps/v4/app/(app)/(create)/lib/build-instructions.ts Normal file
View File

@@ -0,0 +1,288 @@
import dedent from "dedent"
import { UI_COMPONENTS } from "@/lib/components"
import {
buildRegistryBase,
getBodyFont,
getHeadingFont,
getInheritedHeadingFontValue,
type DesignSystemConfig,
} from "@/registry/config"
// Builds step-by-step markdown instructions for manually setting up a project.
export function buildInstructions(config: DesignSystemConfig) {
const registryBase = buildRegistryBase(config)
const normalizedFontHeading =
config.fontHeading === config.font ? "inherit" : config.fontHeading
const dependencies = [...(registryBase.dependencies ?? []), "cn"]
const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
.map(([key, value]) => ` --${key}: ${value};`)
.join("\n")
const darkVars = Object.entries(registryBase.cssVars?.dark ?? {})
.map(([key, value]) => ` --${key}: ${value};`)
.join("\n")
const font = getBodyFont(config.font)
const headingFont =
normalizedFontHeading === "inherit"
? undefined
: getHeadingFont(normalizedFontHeading)
const sections = [
buildDependenciesSection(dependencies),
buildUtilsSection(),
buildCssSection(
lightVars,
darkVars,
normalizedFontHeading === "inherit"
? getInheritedHeadingFontValue(config.font)
: "var(--font-heading)"
),
buildFontSection(font, headingFont),
buildComponentsJsonSection(config),
buildAvailableComponentsSection(config),
config.rtl ? buildRtlSection(config) : null,
]
return sections.filter(Boolean).join("\n\n---\n\n")
}
function buildDependenciesSection(dependencies: string[]) {
const list = dependencies.map((dep) => `- ${dep}`).join("\n")
return dedent`
## Step 1: Dependencies
The following dependencies are required:
${list}
`
}
function buildUtilsSection() {
return dedent`
## Step 2: Create \`lib/utils.ts\`
\`\`\`ts
export { cn } from "cn"
\`\`\`
`
}
function buildCssSection(
lightVars: string,
darkVars: string,
fontHeadingValue: string
) {
return dedent`
## Step 3: Set up CSS
Add the following to your global CSS file (e.g. \`app/globals.css\`):
\`\`\`css
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@theme inline {
--font-sans: var(--font-sans);
--font-heading: ${fontHeadingValue};
--font-mono: var(--font-mono);
--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-destructive-foreground: var(--destructive-foreground);
--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);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--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 {
${lightVars}
}
.dark {
${darkVars}
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
\`\`\`
`
}
function buildFontSection(
font: ReturnType<typeof getBodyFont>,
headingFont: ReturnType<typeof getHeadingFont>
) {
if (!font) {
return null
}
const googleFontsUrl = `https://fonts.google.com/specimen/${font.font.import.replace(/_/g, "+")}`
const headingGoogleFontsUrl = headingFont
? `https://fonts.google.com/specimen/${headingFont.font.import.replace(/_/g, "+")}`
: null
const nextImports = headingFont
? `${font.font.import}, ${headingFont.font.import}`
: font.font.import
const nextDeclarations = [
`const fontSans = ${font.font.import}({`,
` subsets: ["latin"],`,
` variable: "${font.font.variable}",`,
`})`,
headingFont ? `const fontHeading = ${headingFont.font.import}({` : null,
headingFont ? ` subsets: ["latin"],` : null,
headingFont ? ` variable: "${headingFont.font.variable}",` : null,
headingFont ? `})` : null,
]
.filter(Boolean)
.join("\n")
const nextHtmlClassName = headingFont
? 'className={fontSans.variable + " " + fontHeading.variable}'
: `className={fontSans.variable}`
const otherFrameworkCss = [
":root {",
` ${font.font.variable}: ${font.font.family};`,
...(headingFont
? [` ${headingFont.font.variable}: ${headingFont.font.family};`]
: []),
"}",
].join("\n")
const headingSection = headingFont
? dedent`
This config also uses **${headingFont.title.replace(" (Heading)", "")}** for headings (\`${headingFont.font.variable}\`).
`
: ""
return dedent`
## Step 4: Set up the font
This config uses **${font.title}** (\`${font.font.variable}\`).
${headingSection}
### Next.js
\`\`\`tsx
import { ${nextImports} } from "next/font/google"
${nextDeclarations}
// Add the font variable classes to your <html> className.
// <html ${nextHtmlClassName}>
\`\`\`
### Other frameworks
Add the font${headingFont ? "s" : ""} from [Google Fonts](${googleFontsUrl})${headingGoogleFontsUrl ? ` and [Google Fonts](${headingGoogleFontsUrl})` : ""} and set the CSS variable${headingFont ? "s" : ""} to the font famil${headingFont ? "ies" : "y"}:
\`\`\`css
${otherFrameworkCss}
\`\`\`
`
}
function buildComponentsJsonSection(config: DesignSystemConfig) {
const componentsJson = {
$schema: "https://ui.shadcn.com/schema.json",
style: `${config.base}-${config.style}`,
tailwind: {
css: "app/globals.css",
baseColor: config.baseColor,
},
iconLibrary: config.iconLibrary,
aliases: {
components: "@/components",
utils: "@/lib/utils",
ui: "@/components/ui",
lib: "@/lib",
hooks: "@/hooks",
},
}
return dedent`
## Step 5: Create \`components.json\`
Add a \`components.json\` file to the root of your project:
\`\`\`json
${JSON.stringify(componentsJson, null, 2)}
\`\`\`
`
}
function buildAvailableComponentsSection(config: DesignSystemConfig) {
const list = UI_COMPONENTS.join(", ")
const style = `${config.base}-${config.style}`
return dedent`
## Available Components
${list}
To fetch the source for a component, use:
\`https://ui.shadcn.com/r/styles/${style}/<component>.json\`
For documentation and examples, visit:
\`https://ui.shadcn.com/docs/components/${config.base}/<component>\`
`
}
function buildRtlSection(config: DesignSystemConfig) {
const template =
config.template === "next-monorepo" ? "next" : (config.template ?? "next")
return dedent`
## RTL Support
Add \`dir="rtl"\` to your root \`<html>\` element:
\`\`\`html
<html dir="rtl">
\`\`\`
For full RTL setup including the \`DirectionProvider\`, see the [RTL documentation](https://ui.shadcn.com/docs/rtl/${template}).
`
}

3
apps/v4/app/(app)/(create)/lib/constants.ts Normal file
View File

@@ -0,0 +1,3 @@
export const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]
export const EXCLUDED_ITEMS = ["component-example"]

10
apps/v4/app/(app)/(create)/lib/devtools.ts Normal file
View File

@@ -0,0 +1,10 @@
import { type BaseName } from "@/registry/config"
export function getDocsPathForItem(base: BaseName, item: string) {
if (item.endsWith("-example")) {
const component = item.slice(0, -"-example".length)
return `/docs/components/${base}/${component}`
}
return "/docs/components"
}

77
apps/v4/app/(app)/(create)/lib/fonts.ts Normal file
View File

@@ -0,0 +1,77 @@
import { FONT_DEFINITIONS, type FontName } from "@/lib/font-definitions"
type CreateFont = {
family: string
import: string
previewVariable: string
style: {
fontFamily: string
}
variable: string
}
function createFontOption(name: FontName) {
const definition = FONT_DEFINITIONS.find((font) => font.name === name)
if (!definition) {
throw new Error(`Unknown font definition: ${name}`)
}
return {
name: definition.title,
value: definition.name,
font: {
family: definition.family,
import: definition.import,
previewVariable: definition.previewVariable,
style: {
fontFamily: `var(${definition.previewVariable}), ${definition.family}`,
},
variable: definition.registryVariable,
} satisfies CreateFont,
type: definition.type,
} as const
}
export const FONTS = [
createFontOption("geist"),
createFontOption("inter"),
createFontOption("noto-sans"),
createFontOption("nunito-sans"),
createFontOption("figtree"),
createFontOption("roboto"),
createFontOption("raleway"),
createFontOption("dm-sans"),
createFontOption("public-sans"),
createFontOption("outfit"),
createFontOption("oxanium"),
createFontOption("manrope"),
createFontOption("space-grotesk"),
createFontOption("montserrat"),
createFontOption("ibm-plex-sans"),
createFontOption("source-sans-3"),
createFontOption("instrument-sans"),
createFontOption("geist-mono"),
createFontOption("jetbrains-mono"),
createFontOption("noto-serif"),
createFontOption("roboto-slab"),
createFontOption("merriweather"),
createFontOption("lora"),
createFontOption("playfair-display"),
createFontOption("eb-garamond"),
createFontOption("instrument-serif"),
] as const
export type Font = (typeof FONTS)[number]
export const FONT_HEADING_OPTIONS = [
{
name: "Inherit",
value: "inherit",
font: null,
type: "default",
},
...FONTS,
] as const
export type FontHeadingOption = (typeof FONT_HEADING_OPTIONS)[number]

32
apps/v4/app/(app)/(create)/lib/merge-theme.ts Normal file
View File

@@ -0,0 +1,32 @@
import { registryItemSchema, type RegistryItem } from "shadcn/schema"
import { BASE_COLORS, THEMES } from "@/registry/config"
export function buildTheme(baseColorName: string, themeName: string) {
const baseColor = BASE_COLORS.find((c) => c.name === baseColorName)
const theme = THEMES.find((t) => t.name === themeName)
if (!baseColor || !theme) {
throw new Error(
`Base color "${baseColorName}" or theme "${themeName}" not found`
)
}
const mergedTheme: RegistryItem = {
name: `${baseColor.name}-${theme.name}`,
title: `${baseColor.title} ${theme.title}`,
type: "registry:theme",
cssVars: {
light: {
...baseColor.cssVars?.light,
...theme.cssVars?.light,
},
dark: {
...baseColor.cssVars?.dark,
...theme.cssVars?.dark,
},
},
}
return registryItemSchema.parse(mergedTheme)
}

79
apps/v4/app/(app)/(create)/lib/parse-config.test.ts Normal file
View File

@@ -0,0 +1,79 @@
import { describe, expect, it } from "vitest"
import { parseDesignSystemConfig } from "./parse-config"
describe("parseDesignSystemConfig", () => {
it("defaults pointer to false when omitted", () => {
const result = parseDesignSystemConfig(
new URLSearchParams(
"base=base&style=sera&baseColor=taupe&theme=taupe&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default&fontHeading=playfair-display&template=vite&track=1"
)
)
expect(result.success).toBe(true)
if (!result.success) {
throw new Error(result.error)
}
expect(result.data.pointer).toBe(false)
})
it("parses pointer=true", () => {
const result = parseDesignSystemConfig(
new URLSearchParams(
"base=base&style=sera&baseColor=taupe&theme=taupe&iconLibrary=lucide&font=noto-sans&rtl=false&pointer=true&menuAccent=subtle&menuColor=default&radius=default&fontHeading=playfair-display&template=vite&track=1"
)
)
expect(result.success).toBe(true)
if (!result.success) {
throw new Error(result.error)
}
expect(result.data.pointer).toBe(true)
})
it("defaults missing chartColor from the selected theme", () => {
const result = parseDesignSystemConfig(
new URLSearchParams(
"base=base&style=sera&baseColor=taupe&theme=taupe&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default&fontHeading=playfair-display&template=vite&track=1"
)
)
expect(result.success).toBe(true)
if (!result.success) {
throw new Error(result.error)
}
expect(result.data.chartColor).toBe("taupe")
})
it("honors explicit fontHeading and chartColor overrides when a preset is present", () => {
const result = parseDesignSystemConfig(
new URLSearchParams(
"preset=a0&fontHeading=playfair-display&chartColor=emerald"
)
)
expect(result.success).toBe(true)
if (!result.success) {
throw new Error(result.error)
}
expect(result.data.fontHeading).toBe("playfair-display")
expect(result.data.chartColor).toBe("emerald")
})
it("keeps pointer outside preset decoding", () => {
const result = parseDesignSystemConfig(
new URLSearchParams("preset=a0&pointer=true")
)
expect(result.success).toBe(true)
if (!result.success) {
throw new Error(result.error)
}
expect(result.data.pointer).toBe(true)
})
})

54
apps/v4/app/(app)/(create)/lib/parse-config.ts Normal file
View File

@@ -0,0 +1,54 @@
import { decodePreset, isPresetCode } from "shadcn/preset"
import {
designSystemConfigSchema,
type DesignSystemConfig,
} from "@/registry/config"
import { resolvePresetOverrides } from "@/app/(app)/(create)/lib/preset-query"
// Parses design system config from URL search params.
export function parseDesignSystemConfig(searchParams: URLSearchParams) {
let configInput: Record<string, unknown>
const presetParam = searchParams.get("preset")
if (presetParam && isPresetCode(presetParam)) {
const decoded = decodePreset(presetParam)
if (!decoded) {
return { success: false as const, error: "Invalid preset code" }
}
const presetOverrides = resolvePresetOverrides(searchParams, decoded)
configInput = {
...decoded,
...presetOverrides,
base: searchParams.get("base") ?? "base",
template: searchParams.get("template") ?? undefined,
rtl: searchParams.get("rtl") === "true",
pointer: searchParams.get("pointer") === "true",
}
} else {
configInput = {
base: searchParams.get("base"),
style: searchParams.get("style"),
iconLibrary: searchParams.get("iconLibrary"),
baseColor: searchParams.get("baseColor"),
theme: searchParams.get("theme"),
chartColor: searchParams.get("chartColor") ?? undefined,
font: searchParams.get("font"),
fontHeading: searchParams.get("fontHeading") ?? undefined,
menuAccent: searchParams.get("menuAccent"),
menuColor: searchParams.get("menuColor"),
radius: searchParams.get("radius"),
template: searchParams.get("template") ?? undefined,
rtl: searchParams.get("rtl") === "true",
pointer: searchParams.get("pointer") === "true",
}
}
const result = designSystemConfigSchema.safeParse(configInput)
if (!result.success) {
return { success: false as const, error: result.error.issues[0].message }
}
return { success: true as const, data: result.data as DesignSystemConfig }
}

17
apps/v4/app/(app)/(create)/lib/parse-preset-input.test.ts Normal file
View File

@@ -0,0 +1,17 @@
import { describe, expect, it } from "vitest"
import { parsePresetInput } from "./parse-preset-input"
describe("parsePresetInput", () => {
it("accepts a raw preset code", () => {
expect(parsePresetInput("b0")).toBe("b0")
})
it("accepts a --preset flag", () => {
expect(parsePresetInput(" --preset b0 ")).toBe("b0")
})
it("rejects invalid preset input", () => {
expect(parsePresetInput("open sesame")).toBeNull()
})
})

15
apps/v4/app/(app)/(create)/lib/parse-preset-input.ts Normal file
View File

@@ -0,0 +1,15 @@
import { isPresetCode } from "shadcn/preset"
const PRESET_FLAG_PATTERN = /^--preset\b\s+(.+)$/i
export function parsePresetInput(value: string) {
const input = value.trim()
if (!input) {
return null
}
const preset = input.match(PRESET_FLAG_PATTERN)?.[1]?.trim() ?? input
return isPresetCode(preset) ? preset : null
}

34
apps/v4/app/(app)/(create)/lib/preset-code.ts Normal file
View File

@@ -0,0 +1,34 @@
import { encodePreset, type PresetConfig } from "shadcn/preset"
import { type DesignSystemConfig } from "@/registry/config"
type PresetCodeConfig = Pick<
DesignSystemConfig,
| "style"
| "baseColor"
| "theme"
| "chartColor"
| "iconLibrary"
| "font"
| "fontHeading"
| "radius"
| "menuAccent"
| "menuColor"
>
export function getPresetCode(config: PresetCodeConfig) {
const presetConfig: Partial<PresetConfig> = {
style: config.style as PresetConfig["style"],
baseColor: config.baseColor as PresetConfig["baseColor"],
theme: config.theme as PresetConfig["theme"],
chartColor: config.chartColor as PresetConfig["chartColor"],
iconLibrary: config.iconLibrary as PresetConfig["iconLibrary"],
font: config.font as PresetConfig["font"],
fontHeading: config.fontHeading as PresetConfig["fontHeading"],
radius: config.radius as PresetConfig["radius"],
menuAccent: config.menuAccent as PresetConfig["menuAccent"],
menuColor: config.menuColor as PresetConfig["menuColor"],
}
return encodePreset(presetConfig)
}

34
apps/v4/app/(app)/(create)/lib/preset-query.test.ts Normal file
View File

@@ -0,0 +1,34 @@
import { describe, expect, it } from "vitest"
import { resolvePresetOverrides } from "./preset-query"
describe("resolvePresetOverrides", () => {
it("prefers explicit fontHeading and chartColor query params", () => {
const overrides = resolvePresetOverrides(
new URLSearchParams("fontHeading=playfair-display&chartColor=emerald"),
{
theme: "neutral",
chartColor: "blue",
fontHeading: "inherit",
}
)
expect(overrides).toEqual({
fontHeading: "playfair-display",
chartColor: "emerald",
})
})
it("falls back to decoded preset values when no overrides are present", () => {
const overrides = resolvePresetOverrides(new URLSearchParams(), {
theme: "neutral",
chartColor: "blue",
fontHeading: "inherit",
})
expect(overrides).toEqual({
fontHeading: "inherit",
chartColor: "blue",
})
})
})

30
apps/v4/app/(app)/(create)/lib/preset-query.ts Normal file
View File

@@ -0,0 +1,30 @@
import { V1_CHART_COLOR_MAP, type PresetConfig } from "shadcn/preset"
import { type ChartColorName, type FontHeadingValue } from "@/registry/config"
type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
export function resolvePresetOverrides(
searchParams: SearchParamsLike,
decoded: Pick<PresetConfig, "theme" | "chartColor" | "fontHeading">
) {
const hasFontHeadingOverride = searchParams.has("fontHeading")
const hasChartColorOverride = searchParams.has("chartColor")
const fontHeading = hasFontHeadingOverride
? ((searchParams.get("fontHeading") ??
decoded.fontHeading) as FontHeadingValue)
: decoded.fontHeading
const chartColor = hasChartColorOverride
? ((searchParams.get("chartColor") ??
decoded.chartColor ??
V1_CHART_COLOR_MAP[decoded.theme] ??
decoded.theme) as ChartColorName)
: (decoded.chartColor ?? V1_CHART_COLOR_MAP[decoded.theme] ?? decoded.theme)
return {
fontHeading,
chartColor,
}
}

113
apps/v4/app/(app)/(create)/lib/randomize-biases.ts Normal file
View File

@@ -0,0 +1,113 @@
import type {
BaseColor,
BaseColorName,
Radius,
StyleName,
Theme,
ThemeName,
} from "@/registry/config"
import { type FONTS } from "./fonts"
export type RandomizeContext = {
style?: StyleName
baseColor?: BaseColorName
theme?: ThemeName
chartColor?: string
iconLibrary?: string
font?: string
menuAccent?: string
menuColor?: string
radius?: string
}
export type BiasFilter<T> = (
items: readonly T[],
context: RandomizeContext
) => readonly T[]
export type RandomizeBiases = {
baseColors?: BiasFilter<BaseColor>
chartColors?: BiasFilter<Theme>
fonts?: BiasFilter<(typeof FONTS)[number]>
radius?: BiasFilter<Radius>
}
// Theme → chart color pairings for randomization.
const CHART_COLOR_PAIRINGS: Record<string, string[]> = {
red: ["teal", "sky"],
orange: ["teal", "blue"],
amber: ["cyan", "indigo"],
yellow: ["sky", "violet"],
lime: ["indigo", "pink"],
green: ["purple", "rose"],
emerald: ["purple", "red"],
teal: ["fuchsia", "red"],
cyan: ["rose", "amber"],
sky: ["red", "yellow"],
blue: ["orange", "yellow"],
indigo: ["amber", "yellow"],
violet: ["yellow", "lime"],
purple: ["green", "lime"],
fuchsia: ["lime", "teal"],
pink: ["green", "cyan"],
rose: ["emerald", "sky"],
}
/**
* Configuration for randomization biases.
* Add biases here to influence random selection based on context.
*/
export const RANDOMIZE_BIASES: RandomizeBiases = {
baseColors: (baseColors) => {
return baseColors.filter((c) => c.name !== "gray")
},
fonts: (fonts, context) => {
// When style is lyra, only use mono fonts.
if (context.style === "lyra") {
return fonts.filter((font) => font.value === "jetbrains-mono")
}
return fonts
},
radius: (radii, context) => {
// When style is lyra, always use "none" radius.
if (context.style === "lyra") {
return radii.filter((radius) => radius.name === "none")
}
// Rhea does not support the "large" radius.
if (context.style === "rhea") {
return radii.filter((radius) => radius.name !== "large")
}
return radii
},
chartColors: (chartColors, context) => {
// When theme has a pairing, restrict chart colors to the paired values.
const pairing = context.theme ? CHART_COLOR_PAIRINGS[context.theme] : null
if (pairing) {
const filtered = chartColors.filter((c) => pairing.includes(c.name))
if (filtered.length > 0) {
return filtered
}
}
return chartColors
},
}
/**
* Applies biases to a list of items based on the current context.
*/
export function applyBias<T>(
items: readonly T[],
context: RandomizeContext,
biasFilter?: BiasFilter<T>
): readonly T[] {
if (!biasFilter) {
return items
}
return biasFilter(items, context)
}

53
apps/v4/app/(app)/(create)/lib/search-params.test.ts Normal file
View File

@@ -0,0 +1,53 @@
import { describe, expect, it } from "vitest"
import { DEFAULT_CONFIG } from "@/registry/config"
import { buildPresetUrlUpdate } from "./search-params"
describe("buildPresetUrlUpdate", () => {
it("encodes design system params into preset and clears individual keys", () => {
const update = buildPresetUrlUpdate({
...DEFAULT_CONFIG,
preset: "b0",
template: "next",
item: "preview-02",
size: 100,
custom: false,
})
expect(update.preset).toBeTypeOf("string")
expect(update.style).toBeNull()
expect(update.theme).toBeNull()
expect(update.baseColor).toBeNull()
})
it("preserves template when syncing preset from ?template=start", () => {
const update = buildPresetUrlUpdate({
...DEFAULT_CONFIG,
preset: "b0",
template: "start",
item: "preview-02",
size: 100,
custom: false,
})
expect(update.template).toBe("start")
expect(update.preset).toBeTypeOf("string")
})
it("applies non-design-system updates from resolvedUpdates", () => {
const update = buildPresetUrlUpdate(
{
...DEFAULT_CONFIG,
preset: "b0",
template: "next",
item: "preview-02",
size: 100,
custom: false,
},
{ template: "vite" }
)
expect(update.template).toBe("vite")
})
})

343
apps/v4/app/(app)/(create)/lib/search-params.ts Normal file
View File

@@ -0,0 +1,343 @@
import * as React from "react"
import { useSearchParams } from "next/navigation"
import { useQueryStates } from "nuqs"
import {
createLoader,
createSerializer,
parseAsBoolean,
parseAsInteger,
parseAsString,
parseAsStringLiteral,
type inferParserType,
type Options,
} from "nuqs/server"
import { decodePreset, isPresetCode } from "shadcn/preset"
import {
BASE_COLORS,
BASES,
DEFAULT_CONFIG,
getThemesForBaseColor,
iconLibraries,
MENU_ACCENTS,
MENU_COLORS,
RADII,
STYLES,
THEMES,
type BaseColorName,
type BaseName,
type ChartColorName,
type FontHeadingValue,
type FontValue,
type IconLibraryName,
type MenuAccentValue,
type MenuColorValue,
type RadiusValue,
type StyleName,
type ThemeName,
} from "@/registry/config"
import { FONTS } from "@/app/(app)/(create)/lib/fonts"
import { getPresetCode } from "@/app/(app)/(create)/lib/preset-code"
import { resolvePresetOverrides } from "@/app/(app)/(create)/lib/preset-query"
const designSystemSearchParams = {
preset: parseAsString.withDefault("b0"),
base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
DEFAULT_CONFIG.base
),
item: parseAsString.withDefault("preview-02").withOptions({ shallow: true }),
iconLibrary: parseAsStringLiteral<IconLibraryName>(
Object.values(iconLibraries).map((i) => i.name)
).withDefault(DEFAULT_CONFIG.iconLibrary),
style: parseAsStringLiteral<StyleName>(STYLES.map((s) => s.name)).withDefault(
DEFAULT_CONFIG.style
),
theme: parseAsStringLiteral<ThemeName>(THEMES.map((t) => t.name)).withDefault(
DEFAULT_CONFIG.theme
),
chartColor: parseAsStringLiteral<ChartColorName>(
THEMES.map((t) => t.name)
).withDefault(DEFAULT_CONFIG.chartColor ?? "neutral"),
font: parseAsStringLiteral<FontValue>(FONTS.map((f) => f.value)).withDefault(
DEFAULT_CONFIG.font
),
fontHeading: parseAsStringLiteral<FontHeadingValue>([
"inherit",
...FONTS.map((f) => f.value),
]).withDefault(DEFAULT_CONFIG.fontHeading),
baseColor: parseAsStringLiteral<BaseColorName>(
BASE_COLORS.map((b) => b.name)
).withDefault(DEFAULT_CONFIG.baseColor),
menuAccent: parseAsStringLiteral<MenuAccentValue>(
MENU_ACCENTS.map((a) => a.value)
).withDefault(DEFAULT_CONFIG.menuAccent),
menuColor: parseAsStringLiteral<MenuColorValue>(
MENU_COLORS.map((m) => m.value)
).withDefault(DEFAULT_CONFIG.menuColor),
radius: parseAsStringLiteral<RadiusValue>(
RADII.map((r) => r.name)
).withDefault("default"),
template: parseAsStringLiteral([
"next",
"next-monorepo",
"start",
"start-monorepo",
"react-router",
"react-router-monorepo",
"vite",
"vite-monorepo",
"astro",
"astro-monorepo",
"laravel",
] as const).withDefault("next"),
rtl: parseAsBoolean.withDefault(false),
pointer: parseAsBoolean.withDefault(false),
size: parseAsInteger.withDefault(100),
custom: parseAsBoolean.withDefault(false),
}
// Design system param keys that get encoded into the preset code.
const DESIGN_SYSTEM_KEYS = [
"style",
"baseColor",
"theme",
"chartColor",
"iconLibrary",
"font",
"fontHeading",
"radius",
"menuAccent",
"menuColor",
] as const
function normalizeFontHeading(
font: FontValue,
fontHeading: FontHeadingValue
): FontHeadingValue {
// Persist "same as body" as an explicit inherit sentinel so the body font
// can change later without freezing headings to a concrete previous value.
return fontHeading === font ? "inherit" : fontHeading
}
// Non-design-system keys that get passed through as-is.
// `base` is not encoded in preset codes — it's an architectural choice, not visual.
const NON_DESIGN_SYSTEM_KEYS = [
"base",
"item",
"preset",
"template",
"rtl",
"pointer",
"size",
"custom",
] as const
// Shared across hook instances so only one mount effect encodes the initial URL.
let hasSyncedPresetToUrl = false
export const loadDesignSystemSearchParams = createLoader(
designSystemSearchParams
)
export const serializeDesignSystemSearchParams = createSerializer(
designSystemSearchParams
)
export type DesignSystemSearchParams = inferParserType<
typeof designSystemSearchParams
>
export function isTranslucentMenuColor(
menuColor?: MenuColorValue | null
): menuColor is "default-translucent" | "inverted-translucent" {
return (
menuColor === "default-translucent" || menuColor === "inverted-translucent"
)
}
function normalizePartialDesignSystemParams(
params: Partial<DesignSystemSearchParams>
): Partial<DesignSystemSearchParams> {
if (
params.menuAccent === "bold" &&
isTranslucentMenuColor(params.menuColor ?? undefined)
) {
return {
...params,
menuAccent: "subtle",
}
}
return params
}
function normalizeDesignSystemParams(
params: DesignSystemSearchParams
): DesignSystemSearchParams {
let result = {
...params,
fontHeading: normalizeFontHeading(params.font, params.fontHeading),
}
// Validate theme and chartColor against baseColor.
if (result.baseColor) {
const available = getThemesForBaseColor(result.baseColor)
const themeValid = available.some((t) => t.name === result.theme)
const chartColorValid = available.some((t) => t.name === result.chartColor)
if (!themeValid || !chartColorValid) {
const fallback = (available[0]?.name ?? result.baseColor) as ThemeName
result = {
...result,
...(!themeValid && { theme: fallback }),
...(!chartColorValid && { chartColor: fallback as ChartColorName }),
}
}
}
if (
result.menuAccent === "bold" &&
isTranslucentMenuColor(result.menuColor)
) {
return {
...result,
menuAccent: "subtle",
}
}
return result
}
// If preset param exists, decode it and overlay on raw params.
// V1 presets don't encode chartColor — fall back to the colored
// theme that base-color themes originally borrowed charts from.
type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
function resolvePresetParams(
rawParams: DesignSystemSearchParams,
searchParams: SearchParamsLike
) {
if (rawParams.preset && isPresetCode(rawParams.preset)) {
const decoded = decodePreset(rawParams.preset)
if (decoded) {
const presetOverrides = resolvePresetOverrides(searchParams, decoded)
return normalizeDesignSystemParams({
...decoded,
...presetOverrides,
base: rawParams.base,
item: rawParams.item,
preset: rawParams.preset,
template: rawParams.template,
rtl: rawParams.rtl,
pointer: rawParams.pointer,
size: rawParams.size,
custom: rawParams.custom,
})
}
}
return normalizeDesignSystemParams(rawParams)
}
export function buildPresetUrlUpdate(
merged: DesignSystemSearchParams,
resolvedUpdates: Partial<DesignSystemSearchParams> = {}
) {
const code = getPresetCode(merged)
const rawUpdate: Record<string, unknown> = { preset: code }
for (const key of DESIGN_SYSTEM_KEYS) {
rawUpdate[key] = null
}
for (const key of NON_DESIGN_SYSTEM_KEYS) {
if (key === "preset") {
continue
}
rawUpdate[key] =
key in resolvedUpdates
? (resolvedUpdates as Record<string, unknown>)[key]
: merged[key]
}
return rawUpdate
}
// Wraps nuqs useQueryStates with transparent preset encoding/decoding.
// - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values.
// - Writes: when design system params are set, encodes them into a preset code.
//
// Default options use shallow: true so picker selections do not trigger a full
// Next.js server navigation. This prevents the customizer panel from flickering
// or resetting while the URL update propagates (#10910, #11060).
export function useDesignSystemSearchParams(options: Options = {}) {
const searchParams = useSearchParams()
const [rawParams, rawSetParams] = useQueryStates(designSystemSearchParams, {
shallow: true,
history: "push",
...options,
})
const params = React.useMemo(
() => resolvePresetParams(rawParams, searchParams),
[rawParams, searchParams]
)
// Use ref so setParams callback stays stable across renders.
const paramsRef = React.useRef(params)
React.useEffect(() => {
paramsRef.current = params
}, [params])
React.useEffect(() => {
if (hasSyncedPresetToUrl || searchParams.has("preset")) {
return
}
hasSyncedPresetToUrl = true
const merged = normalizeDesignSystemParams(paramsRef.current)
void rawSetParams(buildPresetUrlUpdate(merged) as RawSetParamsInput, {
history: "replace",
})
}, [rawSetParams, searchParams])
type RawSetParamsInput = Parameters<typeof rawSetParams>[0]
const setParams = React.useCallback(
(
updates:
| Partial<DesignSystemSearchParams>
| ((
old: DesignSystemSearchParams
) => Partial<DesignSystemSearchParams>),
setOptions?: Options
) => {
const resolvedUpdates = normalizePartialDesignSystemParams(
typeof updates === "function" ? updates(paramsRef.current) : updates
)
const hasDesignSystemUpdate = DESIGN_SYSTEM_KEYS.some(
(key) => key in resolvedUpdates
)
if (!hasDesignSystemUpdate) {
// No design system change, pass through directly.
return rawSetParams(resolvedUpdates as RawSetParamsInput, setOptions)
}
// Merge current decoded values with updates.
const merged = normalizeDesignSystemParams({
...paramsRef.current,
...resolvedUpdates,
})
return rawSetParams(
buildPresetUrlUpdate(merged, resolvedUpdates) as RawSetParamsInput,
setOptions
)
},
[rawSetParams]
)
return [params, setParams] as const
}

28
apps/v4/app/(app)/(create)/lib/shuffle-presets.ts Normal file
View File

@@ -0,0 +1,28 @@
// Curated preset codes from https://dialectcn.xyz.
export const SHUFFLE_PRESETS = [
"b6sUj34d9",
"b2tqYzpa88",
"b1W4tDrk",
"b1aIuQ2XC",
"b7jsW1RxJ5",
"b870VEw0in",
"b3Zheoix4U",
"b1x9M2c4aI",
"b1W7jDEW",
"b51GFh7y6",
"b2fms620zo",
"b1Q5GC",
"buKEvLs",
"b5rR41Mtnc",
"b6tOz2I0x",
"b2hNTREGRN",
"bdIJ7Sq",
"b6TqMNb5Wb",
"bJIirQ",
"b4aRK5K0fb",
"b5HCiD38LI",
"bdHjvCi",
"b7QDHijUjj",
"b4ZVZIPi9h",
"b1W4bcno",
]

55
apps/v4/app/(app)/(create)/lib/templates.ts Normal file
View File

@@ -0,0 +1,55 @@
export const TEMPLATES = [
{
value: "next",
title: "Next.js",
logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" fill="currentColor"/></svg>',
},
{
value: "vite",
title: "Vite",
logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--color-neutral-800)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
},
{
value: "start",
title: "TanStack Start",
logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63" fill="currentColor"/></svg>',
},
{
value: "laravel",
title: "Laravel",
logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Laravel</title><path d="M23.642 5.43a.364.364 0 0 1 .014.1v5.149c0 .135-.073.26-.189.326l-4.323 2.49v4.934a.378.378 0 0 1-.188.326L9.93 23.949a.316.316 0 0 1-.066.027c-.008.002-.016.008-.024.01a.348.348 0 0 1-.192 0c-.011-.002-.02-.008-.03-.012-.02-.008-.042-.014-.062-.025L.533 18.755a.376.376 0 0 1-.189-.326V2.974c0-.033.005-.066.014-.098.003-.012.01-.02.014-.032a.369.369 0 0 1 .023-.058c.004-.013.015-.022.023-.033l.033-.045c.012-.01.025-.018.037-.027.014-.012.027-.024.041-.034h.001L5.044.05a.375.375 0 0 1 .375 0L9.933 2.697h.002c.015.01.027.021.04.033l.038.027c.013.014.02.03.033.045.008.011.02.021.025.033.01.02.017.038.024.058.003.011.01.021.013.032.01.031.014.064.014.098v9.652l3.76-2.164V5.527c0-.033.004-.066.013-.098.003-.01.01-.02.013-.032a.487.487 0 0 1 .024-.059c.007-.012.018-.02.025-.033.012-.015.021-.03.033-.043.012-.012.025-.02.037-.028.014-.011.026-.023.041-.032h.001l4.513-2.647a.375.375 0 0 1 .375 0l4.513 2.647c.016.011.029.021.042.031.012.01.025.018.036.028.013.014.022.03.034.045.008.012.019.021.024.033a.3.3 0 0 1 .024.06c.006.01.012.021.015.032zm-.74 5.032V5.860l-1.578.908-2.182 1.256v4.603zm-4.514 7.75v-4.605l-2.148 1.227-6.876 3.93v4.649zm-17.642-15.3v15.15l8.25 4.757v-4.645L4.699 15.87l-.003-.002-.002-.001c-.014-.01-.025-.021-.04-.033-.012-.01-.026-.018-.036-.028l-.001-.002c-.013-.012-.021-.028-.032-.043-.01-.013-.022-.023-.03-.037v-.002c-.01-.014-.016-.032-.023-.048-.006-.012-.016-.023-.02-.035l-.002-.001c-.005-.018-.008-.037-.011-.057L4.5 15.58v-9.51l-2.182-1.256-1.578-.908zm4.322-2.474L1.313 2.974l3.756 2.163 3.755-2.163zm2.068 11.22 2.182-1.256V1.974L7.937 3.23 5.755 4.486v11.186zm10.895-7.583-3.755 2.163 3.755 2.164 3.755-2.164zm-.375 4.976-2.182-1.256-1.578-.908v4.603l2.182 1.256 1.578.908zm-8.438 6.186 5.494-3.14 2.944-1.682-3.755-2.163-4.323 2.489-4.136 2.384z" fill="currentColor"/></svg>',
},
{
value: "react-router",
title: "React Router",
logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" fill="currentColor"/></svg>',
},
{
value: "astro",
title: "Astro",
logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Astro</title><path d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z" fill="currentColor"/></svg>',
},
] as const
export type TemplateValue = (typeof TEMPLATES)[number]["value"]
// Extract the base framework from a template value (e.g. "next-monorepo" -> "next").
export function getFramework(template: string) {
return template.replace("-monorepo", "") as TemplateValue
}
// Frameworks that don't support the monorepo template.
export const NO_MONOREPO_FRAMEWORKS = ["laravel"] as const
// Build the full template value from a framework and monorepo flag.
export function getTemplateValue(framework: string, monorepo: boolean) {
if (
NO_MONOREPO_FRAMEWORKS.includes(
framework as (typeof NO_MONOREPO_FRAMEWORKS)[number]
)
) {
return framework
}
return monorepo ? `${framework}-monorepo` : framework
}

44
apps/v4/app/(app)/(create)/lib/utils.ts Normal file
View File

@@ -0,0 +1,44 @@
import { type RegistryItem } from "shadcn/schema"
const mapping = {
"registry:block": "Blocks",
"registry:example": "Components",
}
export function groupItemsByType(
items: Pick<RegistryItem, "name" | "title" | "type">[]
) {
const grouped = items.reduce(
(acc, item) => {
acc[item.type] = [...(acc[item.type] || []), item]
return acc
},
{} as Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
)
return Object.entries(grouped)
.map(([type, items]) => ({
type,
title: mapping[type as keyof typeof mapping] || type,
items,
}))
.sort((a, b) => {
const aIndex = Object.keys(mapping).indexOf(a.type)
const bIndex = Object.keys(mapping).indexOf(b.type)
// If both are in mapping, sort by their order.
if (aIndex !== -1 && bIndex !== -1) {
return aIndex - bIndex
}
// If only a is in mapping, it comes first.
if (aIndex !== -1) {
return -1
}
// If only b is in mapping, it comes first.
if (bIndex !== -1) {
return 1
}
// If neither is in mapping, maintain original order.
return 0
})
}

137
apps/v4/app/(app)/(create)/lib/v0.test.ts Normal file
View File

@@ -0,0 +1,137 @@
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
import { DEFAULT_CONFIG } from "@/registry/config"
import { buildV0Payload } from "@/app/(app)/(create)/lib/v0"
vi.mock("shadcn/schema", async () => {
return await vi.importActual("shadcn/schema")
})
vi.mock("shadcn/utils", async () => {
const actual = (await vi.importActual("shadcn/utils")) as {
transformFont: unknown
}
return {
transformFont: actual.transformFont,
transformIcons: async ({ sourceFile }: { sourceFile: unknown }) =>
sourceFile,
transformMenu: async ({ sourceFile }: { sourceFile: unknown }) =>
sourceFile,
transformRender: async ({ sourceFile }: { sourceFile: unknown }) =>
sourceFile,
}
})
vi.mock("@/registry/bases/__index__", () => ({
Index: {
base: {
card: {
name: "card",
type: "registry:ui",
},
},
radix: {
card: {
name: "card",
type: "registry:ui",
},
},
},
}))
vi.mock("@/app/(app)/(create)/lib/api", () => ({
getItemsForBase: vi.fn(async () => [{ name: "button", type: "registry:ui" }]),
}))
describe("buildV0Payload", () => {
beforeEach(() => {
process.env.NEXT_PUBLIC_APP_URL = "http://example.test"
vi.stubGlobal(
"fetch",
vi.fn(async (input: string | URL | Request) => {
const url =
typeof input === "string"
? input
: input instanceof URL
? input.toString()
: input.url
const name = url.split("/").pop()?.replace(".json", "") ?? "component"
return new Response(
JSON.stringify({
name,
type: "registry:ui",
files: [
{
path: `registry/base-nova/ui/${name}.tsx`,
type: "registry:ui",
content: `import * as React from "react"\n\nexport function Component() {\n return <div className="cn-font-heading text-xl" />\n}\n`,
},
],
}),
{
status: 200,
headers: {
"Content-Type": "application/json",
},
}
)
})
)
})
afterEach(() => {
vi.unstubAllGlobals()
delete process.env.NEXT_PUBLIC_APP_URL
})
it("rewrites cn-font-heading to font-heading when heading inherits the body font", async () => {
const payload = await buildV0Payload({
...DEFAULT_CONFIG,
item: undefined,
fontHeading: "inherit",
})
const cardFile = payload.files?.find(
(file) => file.target === "components/ui/card.tsx"
)
expect(cardFile?.content).toContain("font-heading")
expect(cardFile?.content).not.toContain("cn-font-heading")
})
it("rewrites cn-font-heading to font-heading when a distinct heading font is selected", async () => {
const payload = await buildV0Payload({
...DEFAULT_CONFIG,
item: undefined,
fontHeading: "playfair-display",
})
const cardFile = payload.files?.find(
(file) => file.target === "components/ui/card.tsx"
)
expect(cardFile?.content).toContain("font-heading")
expect(cardFile?.content).not.toContain("cn-font-heading")
})
it("rejects an item that is not in the base's allowed set", async () => {
await expect(
buildV0Payload({
...DEFAULT_CONFIG,
item: "../../evil",
})
).rejects.toThrow(/Unknown item/)
})
it("does not reject a valid item as unknown", async () => {
await expect(
buildV0Payload({
...DEFAULT_CONFIG,
item: "button",
})
).resolves.toBeDefined()
})
})

627
apps/v4/app/(app)/(create)/lib/v0.ts Normal file
View File

@@ -0,0 +1,627 @@
import dedent from "dedent"
import {
registryItemFileSchema,
registryItemSchema,
type configSchema,
type RegistryItem,
} from "shadcn/schema"
import {
transformFont,
transformIcons,
transformMenu,
transformRender,
} from "shadcn/utils"
import { Project, ScriptKind, type SourceFile } from "ts-morph"
import { z } from "zod"
import {
buildRegistryBase,
getBodyFont,
getHeadingFont,
getInheritedHeadingFontValue,
type DesignSystemConfig,
} from "@/registry/config"
import { getItemsForBase } from "@/app/(app)/(create)/lib/api"
const { Index } = await import("@/registry/bases/__index__")
function buildThemeInline(fontHeadingValue: string) {
return `--font-sans: var(--font-sans);
--font-heading: ${fontHeadingValue};
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--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-destructive-foreground: var(--destructive-foreground);
--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);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--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);`
}
// Static file — parsed once at module level.
const themeProviderFile = registryItemFileSchema.parse({
path: "components/theme-provider.tsx",
type: "registry:component",
target: "components/theme-provider.tsx",
content: dedent`
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return (
<NextThemesProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
{...props}
>
<ThemeHotkey />
{children}
</NextThemesProvider>
)
}
function isTypingTarget(target: EventTarget | null) {
if (!(target instanceof HTMLElement)) {
return false
}
return (
target.isContentEditable ||
target.tagName === "INPUT" ||
target.tagName === "TEXTAREA" ||
target.tagName === "SELECT"
)
}
function ThemeHotkey() {
const { resolvedTheme, setTheme } = useTheme()
React.useEffect(() => {
function onKeyDown(event: KeyboardEvent) {
if (event.defaultPrevented || event.repeat) {
return
}
if (event.metaKey || event.ctrlKey || event.altKey) {
return
}
if (event.key.toLowerCase() !== "d") {
return
}
if (isTypingTarget(event.target)) {
return
}
setTheme(resolvedTheme === "dark" ? "light" : "dark")
}
window.addEventListener("keydown", onKeyDown)
return () => {
window.removeEventListener("keydown", onKeyDown)
}
}, [resolvedTheme, setTheme])
return null
}
export { ThemeProvider }
`,
})
const ALIASES = {
components: "@/components",
utils: "@/lib/utils",
ui: "@/components/ui",
lib: "@/lib",
hooks: "@/hooks",
} as const
type V0Transformer = (opts: {
filename: string
raw: string
sourceFile: SourceFile
config: z.infer<typeof configSchema>
supportedFontMarkers?: string[]
}) => Promise<unknown>
const transformers: V0Transformer[] = [
transformIcons as V0Transformer,
transformMenu as V0Transformer,
transformRender as V0Transformer,
transformFont as V0Transformer,
]
function getStyle(designSystemConfig: DesignSystemConfig) {
return `${designSystemConfig.base}-${designSystemConfig.style}`
}
export async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
if (designSystemConfig.item) {
const allowedItems = await getItemsForBase(designSystemConfig.base)
const isAllowed = allowedItems.some(
(allowed) => allowed?.name === designSystemConfig.item
)
if (!isAllowed) {
throw new Error(`Unknown item: "${designSystemConfig.item}".`)
}
}
const registryBase = buildRegistryBase(designSystemConfig)
const normalizedFontHeading =
designSystemConfig.fontHeading === designSystemConfig.font
? "inherit"
: designSystemConfig.fontHeading
// Only buildComponentFiles is async — run sync builders directly.
const globalsCss = buildGlobalsCss(
registryBase,
designSystemConfig.font,
normalizedFontHeading
)
const layoutFile = buildLayoutFile(designSystemConfig, normalizedFontHeading)
const componentFiles = await buildComponentFiles(designSystemConfig)
const dependencies = [...(registryBase.dependencies ?? []), "next-themes"]
const componentsJson = buildComponentsJson(designSystemConfig)
const packageJson = buildPackageJson(dependencies)
return registryItemSchema.parse({
name: designSystemConfig.item ?? "open-in-v0",
type: "registry:item",
dependencies,
files: [
globalsCss,
layoutFile,
themeProviderFile,
componentsJson,
packageJson,
...componentFiles,
],
})
}
function buildGlobalsCss(
registryBase: RegistryItem,
font: DesignSystemConfig["font"],
fontHeading: DesignSystemConfig["fontHeading"]
) {
const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
.map(([key, value]) => ` --${key}: ${value};`)
.join("\n")
const darkVars = Object.entries(registryBase.cssVars?.dark ?? {})
.map(([key, value]) => ` --${key}: ${value};`)
.join("\n")
const content = dedent`@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
${buildThemeInline(
fontHeading === "inherit"
? getInheritedHeadingFontValue(font)
: "var(--font-heading)"
)}
}
:root {
${lightVars}
}
.dark {
${darkVars}
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
`
return registryItemFileSchema.parse({
path: "app/globals.css",
type: "registry:file",
target: "app/globals.css",
content,
})
}
function buildComponentsJson(designSystemConfig: DesignSystemConfig) {
const content = JSON.stringify(
{
$schema: "https://ui.shadcn.com/schema.json",
style: getStyle(designSystemConfig),
rsc: true,
tsx: true,
tailwind: {
config: "",
css: "app/globals.css",
baseColor: designSystemConfig.baseColor,
cssVariables: true,
prefix: "",
},
aliases: ALIASES,
iconLibrary: designSystemConfig.iconLibrary,
},
null,
2
)
return registryItemFileSchema.parse({
path: "components.json",
type: "registry:file",
target: "components.json",
content,
})
}
function buildPackageJson(dependencies: string[]) {
// Base package.json matching templates/next-app/package.json + component peer deps.
const baseDependencies: Record<string, string> = {
next: "16.1.6",
"next-themes": "^0.4.6",
react: "^19.2.4",
"react-dom": "^19.2.4",
// Utility deps.
"class-variance-authority": "^0.7.1",
cn: "^0.2.4",
// Component peer deps.
"date-fns": "4.1.0",
"embla-carousel-react": "8.5.1",
"input-otp": "1.4.1",
"react-day-picker": "9.8.0",
"react-resizable-panels": "^2.1.7",
recharts: "2.15.4",
sonner: "^1.7.4",
vaul: "^1.1.2",
"@vercel/analytics": "1.3.1",
}
// Merge dynamic dependencies.
for (const dep of dependencies) {
const atIndex = dep.lastIndexOf("@")
if (atIndex > 0) {
// Has version: e.g. "shadcn@latest".
baseDependencies[dep.slice(0, atIndex)] = dep.slice(atIndex + 1)
} else {
baseDependencies[dep] = "latest"
}
}
const content = JSON.stringify(
{
name: "next-app",
version: "0.0.1",
type: "module",
private: true,
scripts: {
dev: "next dev --turbopack",
build: "next build",
start: "next start",
lint: "eslint",
format: 'prettier --write "**/*.{ts,tsx}"',
typecheck: "tsc --noEmit",
},
dependencies: baseDependencies,
devDependencies: {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.1.18",
"@types/node": "^25.1.0",
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3",
eslint: "^9.39.2",
"eslint-config-next": "16.1.6",
prettier: "^3.8.1",
"prettier-plugin-tailwindcss": "^0.7.2",
postcss: "^8",
tailwindcss: "^4.1.18",
"tw-animate-css": "^1.3.4",
typescript: "^5.9.3",
},
},
null,
2
)
return registryItemFileSchema.parse({
path: "package.json",
type: "registry:file",
target: "package.json",
content,
})
}
function buildLayoutFile(
designSystemConfig: DesignSystemConfig,
fontHeading: DesignSystemConfig["fontHeading"]
) {
const font = getBodyFont(designSystemConfig.font)
if (!font) {
throw new Error(`Font "${designSystemConfig.font}" not found`)
}
const headingFont =
fontHeading === "inherit" ? undefined : getHeadingFont(fontHeading)
// Derive const name from the font's CSS variable (e.g. --font-sans → fontSans).
const constName = font.font.variable
.replace(/^--/, "")
.replace(/-./g, (m) => m[1].toUpperCase())
const headingConstName = "fontHeading"
// Add font-serif or font-mono class to body when needed. Sans is the default.
const fontClass =
font.font.variable === "--font-serif"
? "font-serif"
: font.font.variable === "--font-mono"
? "font-mono"
: ""
const bodyClassName = fontClass ? `antialiased ${fontClass}` : "antialiased"
const imports = headingFont
? Array.from(new Set([font.font.import, headingFont.font.import])).join(
", "
)
: font.font.import
const headingDeclaration = headingFont
? `\nconst ${headingConstName} = ${headingFont.font.import}({subsets:['latin'],variable:'${headingFont.font.variable}'});\n`
: ""
const htmlClassName = headingFont
? `{${constName}.variable + " " + ${headingConstName}.variable}`
: `{${constName}.variable}`
const content = dedent`
import type { Metadata } from "next";
import { ${imports} } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
const ${constName} = ${font.font.import}({subsets:['latin'],variable:'${font.font.variable}'});
${headingDeclaration}
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning className=${htmlClassName}>
<body
className="${bodyClassName}"
>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
`
return registryItemFileSchema.parse({
path: "app/layout.tsx",
type: "registry:page",
target: "app/layout.tsx",
content,
})
}
async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {
const allItemsForBase = Object.values(Index[designSystemConfig.base])
.filter((item: RegistryItem) => item.type === "registry:ui")
.map((item) => item.name)
// Build config once for all components.
const config = buildTransformConfig(designSystemConfig)
// Fetch UI components, the demo, and the item component in parallel.
const [registryItemFiles, demoFile, itemComponentFile] = await Promise.all([
Promise.all(
allItemsForBase.map((name) =>
getRegistryItemFile(name, designSystemConfig, config)
)
),
getRegistryItemFile("demo", designSystemConfig, config),
designSystemConfig.item
? getRegistryItemFile(designSystemConfig.item, designSystemConfig, config)
: null,
])
const files = [...registryItemFiles.filter(Boolean)]
// Include the demo component.
if (demoFile) {
files.push({
...demoFile,
target: "components/demo.tsx",
type: "registry:component",
})
}
const pageFile = {
path: "app/page.tsx",
type: "registry:page",
target: "app/page.tsx",
content: dedent`
import { Demo } from "@/components/demo"
export default function Page() {
return <Demo />
}
`,
}
// Build the actual item component.
if (itemComponentFile) {
// Find the export default function from the component file.
const exportDefault = itemComponentFile.content.match(
/export default function (\w+)/
)
if (exportDefault) {
const functionName = exportDefault[1]
// Replace the export default function with a named export.
itemComponentFile.content = itemComponentFile.content.replace(
/export default function (\w+)/,
`export function ${functionName}`
)
// Import and render the item on the page.
pageFile.content = dedent`import { ${functionName} } from "@/components/${designSystemConfig.item}";
export default function Page() {
return <${functionName} />
}`
}
files.push({
...itemComponentFile,
target: `components/${designSystemConfig.item}.tsx`,
type: "registry:component",
})
}
files.push(pageFile)
return z.array(registryItemFileSchema).parse(files)
}
function buildTransformConfig(designSystemConfig: DesignSystemConfig) {
return {
$schema: "https://ui.shadcn.com/schema.json",
style: getStyle(designSystemConfig),
rsc: true,
tsx: true,
tailwind: {
config: "",
css: "app/globals.css",
baseColor: designSystemConfig.baseColor,
cssVariables: true,
prefix: "",
},
iconLibrary: designSystemConfig.iconLibrary,
aliases: ALIASES,
menuAccent: designSystemConfig.menuAccent,
menuColor: designSystemConfig.menuColor,
resolvedPaths: {
cwd: "/",
tailwindConfig: "./tailwind.config.js",
tailwindCss: "./globals.css",
utils: "./lib/utils",
components: "./components",
lib: "./lib",
hooks: "./hooks",
ui: "./components/ui",
},
} satisfies z.infer<typeof configSchema>
}
async function getRegistryItemFile(
name: string,
designSystemConfig: DesignSystemConfig,
config: z.infer<typeof configSchema>
) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${getStyle(designSystemConfig)}/${name}.json`
)
if (!response.ok) {
throw new Error(`Failed to fetch registry item: ${response.statusText}`)
}
const json = await response.json()
const item = registryItemSchema.parse(json)
const file = item.files?.[0]
if (!file?.content) {
return null
}
const content = await transformFileContent(file.content, config)
return {
...file,
target:
name === "example"
? "components/example.tsx"
: `components/ui/${name}.tsx`,
type: name === "example" ? "registry:component" : "registry:ui",
content,
}
}
async function transformFileContent(
content: string,
config: z.infer<typeof configSchema>
) {
const project = new Project({ compilerOptions: {} })
const sourceFile = project.createSourceFile("component.tsx", content, {
scriptKind: ScriptKind.TSX,
overwrite: true,
})
for (const transformer of transformers) {
await transformer({
filename: "component.tsx",
raw: content,
sourceFile,
config,
supportedFontMarkers: ["cn-font-heading"],
})
}
return sourceFile.getText()
}