@fragments-sdk/cli 0.15.0 → 0.15.2

package/dist/create-JVAU3YKN.js

@@ -0,0 +1,852 @@
+import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
+import "./chunk-D2CDBRNU.js";
+import {
+  BRAND
+} from "./chunk-32LIWN2P.js";
+
+// src/commands/create.ts
+import { execSync } from "child_process";
+import { existsSync, mkdirSync, writeFileSync, readFileSync, unlinkSync } from "fs";
+import { join as join2, resolve } from "path";
+import pc from "picocolors";
+
+// src/theme/serializer.ts
+import { deflateSync, inflateSync } from "zlib";
+
+// src/theme/schema.ts
+import { z } from "zod";
+var HEX_COLOR_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var RGB_COLOR_REGEX = /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*(0|1|0?\.\d+))?\s*\)$/;
+var HSL_COLOR_REGEX = /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*(0|1|0?\.\d+))?\s*\)$/;
+var colorSchema = z.string().refine(
+  (val) => {
+    return HEX_COLOR_REGEX.test(val) || RGB_COLOR_REGEX.test(val) || HSL_COLOR_REGEX.test(val);
+  },
+  { message: "Invalid color format. Use hex (#rrggbb), rgb(), rgba(), hsl(), or hsla()" }
+);
+var sizeSchema = z.string().refine(
+  (val) => {
+    return /^-?\d*\.?\d+(px|rem|em|%|vw|vh)?$/.test(val);
+  },
+  { message: "Invalid size format. Use px, rem, em, %, vw, or vh" }
+);
+var shadowSchema = z.string();
+var fontStackSchema = z.string();
+var fontWeightSchema = z.number().int().min(100).max(900);
+var themeColorsSchema = z.object({
+  accent: colorSchema.optional(),
+  accentHover: colorSchema.optional(),
+  accentActive: colorSchema.optional(),
+  danger: colorSchema.optional(),
+  dangerHover: colorSchema.optional(),
+  success: colorSchema.optional(),
+  warning: colorSchema.optional(),
+  info: colorSchema.optional(),
+  dangerBg: colorSchema.optional(),
+  successBg: colorSchema.optional(),
+  warningBg: colorSchema.optional(),
+  infoBg: colorSchema.optional()
+}).strict();
+var themeSurfacesSchema = z.object({
+  bgPrimary: colorSchema.optional(),
+  bgSecondary: colorSchema.optional(),
+  bgTertiary: colorSchema.optional(),
+  bgElevated: colorSchema.optional(),
+  bgHover: colorSchema.optional(),
+  bgActive: colorSchema.optional()
+}).strict();
+var themeTextSchema = z.object({
+  primary: colorSchema.optional(),
+  secondary: colorSchema.optional(),
+  tertiary: colorSchema.optional(),
+  inverse: colorSchema.optional()
+}).strict();
+var themeBordersSchema = z.object({
+  default: colorSchema.optional(),
+  strong: colorSchema.optional()
+}).strict();
+var themeTypographySchema = z.object({
+  fontSans: fontStackSchema.optional(),
+  fontMono: fontStackSchema.optional(),
+  fontWeightNormal: fontWeightSchema.optional(),
+  fontWeightMedium: fontWeightSchema.optional(),
+  fontWeightSemibold: fontWeightSchema.optional()
+}).strict();
+var themeRadiusSchema = z.object({
+  sm: sizeSchema.optional(),
+  md: sizeSchema.optional(),
+  lg: sizeSchema.optional(),
+  full: sizeSchema.optional()
+}).strict();
+var themeShadowsSchema = z.object({
+  sm: shadowSchema.optional(),
+  md: shadowSchema.optional()
+}).strict();
+var themeDarkModeSchema = z.object({
+  surfaces: themeSurfacesSchema.optional(),
+  text: themeTextSchema.optional(),
+  borders: themeBordersSchema.optional(),
+  shadows: themeShadowsSchema.optional(),
+  accent: colorSchema.optional(),
+  accentHover: colorSchema.optional(),
+  accentActive: colorSchema.optional(),
+  dangerBg: colorSchema.optional(),
+  successBg: colorSchema.optional(),
+  warningBg: colorSchema.optional(),
+  infoBg: colorSchema.optional(),
+  backdrop: colorSchema.optional(),
+  dangerText: colorSchema.optional(),
+  successText: colorSchema.optional(),
+  warningText: colorSchema.optional(),
+  infoText: colorSchema.optional()
+}).strict();
+var themeConfigSchema = z.object({
+  name: z.string().min(1, "Theme name is required"),
+  version: z.string().optional(),
+  extends: z.string().optional(),
+  colors: themeColorsSchema.optional(),
+  surfaces: themeSurfacesSchema.optional(),
+  text: themeTextSchema.optional(),
+  borders: themeBordersSchema.optional(),
+  typography: themeTypographySchema.optional(),
+  radius: themeRadiusSchema.optional(),
+  shadows: themeShadowsSchema.optional(),
+  dark: themeDarkModeSchema.optional(),
+  density: z.enum(["compact", "default", "relaxed"]).optional()
+}).strict();
+function validateThemeConfig(config) {
+  const result = themeConfigSchema.safeParse(config);
+  if (result.success) {
+    return { success: true, data: result.data };
+  }
+  return { success: false, error: result.error };
+}
+
+// src/theme/serializer.ts
+function fromBase64Url(str) {
+  let base64 = str.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = base64.length % 4;
+  if (pad) {
+    base64 += "=".repeat(4 - pad);
+  }
+  return Buffer.from(base64, "base64");
+}
+function decompressTheme(encoded) {
+  try {
+    const buffer = fromBase64Url(encoded);
+    const decompressed = inflateSync(buffer);
+    const json = decompressed.toString("utf-8");
+    const parsed = JSON.parse(json);
+    const result = validateThemeConfig(parsed);
+    if (result.success) return result.data;
+  } catch {
+  }
+  try {
+    const buffer = fromBase64Url(encoded);
+    const json = buffer.toString("utf-8");
+    const parsed = JSON.parse(json);
+    const result = validateThemeConfig(parsed);
+    if (result.success) return result.data;
+  } catch {
+  }
+  return null;
+}
+
+// src/theme/generator.ts
+import { mkdir, writeFile } from "fs/promises";
+import { join } from "path";
+var TOKEN_MAPPINGS = {
+  colors: {
+    accent: "fui-color-accent",
+    accentHover: "fui-color-accent-hover",
+    accentActive: "fui-color-accent-active",
+    danger: "fui-color-danger",
+    dangerHover: "fui-color-danger-hover",
+    success: "fui-color-success",
+    warning: "fui-color-warning",
+    info: "fui-color-info",
+    dangerBg: "fui-color-danger-bg",
+    successBg: "fui-color-success-bg",
+    warningBg: "fui-color-warning-bg",
+    infoBg: "fui-color-info-bg",
+    dangerText: "fui-color-danger-text",
+    successText: "fui-color-success-text",
+    warningText: "fui-color-warning-text",
+    infoText: "fui-color-info-text"
+  },
+  surfaces: {
+    bgPrimary: "fui-bg-primary",
+    bgSecondary: "fui-bg-secondary",
+    bgTertiary: "fui-bg-tertiary",
+    bgElevated: "fui-bg-elevated",
+    bgHover: "fui-bg-hover",
+    bgActive: "fui-bg-active"
+  },
+  text: {
+    primary: "fui-text-primary",
+    secondary: "fui-text-secondary",
+    tertiary: "fui-text-tertiary",
+    inverse: "fui-text-inverse"
+  },
+  borders: {
+    default: "fui-border",
+    strong: "fui-border-strong"
+  },
+  typography: {
+    fontSans: "fui-font-sans",
+    fontMono: "fui-font-mono",
+    fontWeightNormal: "fui-font-weight-normal",
+    fontWeightMedium: "fui-font-weight-medium",
+    fontWeightSemibold: "fui-font-weight-semibold"
+  },
+  radius: {
+    sm: "fui-radius-sm",
+    md: "fui-radius-md",
+    lg: "fui-radius-lg",
+    full: "fui-radius-full"
+  },
+  shadows: {
+    sm: "fui-shadow-sm",
+    md: "fui-shadow-md"
+  }
+};
+var DARK_TOKEN_MAPPINGS = {
+  surfaces: {
+    bgPrimary: "fui-dark-bg-primary",
+    bgSecondary: "fui-dark-bg-secondary",
+    bgTertiary: "fui-dark-bg-tertiary",
+    bgElevated: "fui-dark-bg-elevated",
+    bgHover: "fui-dark-bg-hover",
+    bgActive: "fui-dark-bg-active"
+  },
+  text: {
+    primary: "fui-dark-text-primary",
+    secondary: "fui-dark-text-secondary",
+    tertiary: "fui-dark-text-tertiary",
+    inverse: "fui-dark-text-inverse"
+  },
+  borders: {
+    default: "fui-dark-border",
+    strong: "fui-dark-border-strong"
+  },
+  shadows: {
+    sm: "fui-dark-shadow-sm",
+    md: "fui-dark-shadow-md"
+  },
+  // Direct dark mode properties
+  accent: "fui-dark-color-accent",
+  accentHover: "fui-dark-color-accent-hover",
+  accentActive: "fui-dark-color-accent-active",
+  dangerBg: "fui-dark-color-danger-bg",
+  successBg: "fui-dark-color-success-bg",
+  warningBg: "fui-dark-color-warning-bg",
+  infoBg: "fui-dark-color-info-bg",
+  dangerText: "fui-dark-color-danger-text",
+  successText: "fui-dark-color-success-text",
+  warningText: "fui-dark-color-warning-text",
+  infoText: "fui-dark-color-info-text",
+  backdrop: "fui-dark-backdrop"
+};
+function generateCategoryTokens(config, categoryKey, format) {
+  const category = config[categoryKey];
+  if (!category) return [];
+  const mappings = TOKEN_MAPPINGS[categoryKey];
+  const tokens = [];
+  for (const [key, varName] of Object.entries(mappings)) {
+    const value = category[key];
+    if (value !== void 0) {
+      if (format === "scss") {
+        tokens.push(`$${varName}: ${value} !default;`);
+      } else {
+        tokens.push(`  --${varName}: ${value};`);
+      }
+    }
+  }
+  return tokens;
+}
+function generateDarkTokens(config, format) {
+  if (!config.dark) return [];
+  const tokens = [];
+  const nestedCategories = ["surfaces", "text", "borders", "shadows"];
+  for (const category of nestedCategories) {
+    const categoryData = config.dark[category];
+    if (!categoryData) continue;
+    const mappings = DARK_TOKEN_MAPPINGS[category];
+    for (const [key, varName] of Object.entries(mappings)) {
+      const value = categoryData[key];
+      if (value !== void 0) {
+        if (format === "scss") {
+          tokens.push(`$${varName}: ${value} !default;`);
+        } else {
+          tokens.push(`  --${varName.replace("fui-dark-", "fui-")}: ${value};`);
+        }
+      }
+    }
+  }
+  const directProps = ["accent", "accentHover", "accentActive", "dangerBg", "successBg", "warningBg", "infoBg", "dangerText", "successText", "warningText", "infoText", "backdrop"];
+  for (const prop of directProps) {
+    const value = config.dark[prop];
+    if (value !== void 0) {
+      const varName = DARK_TOKEN_MAPPINGS[prop];
+      if (format === "scss") {
+        tokens.push(`$${varName}: ${value} !default;`);
+      } else {
+        const cssVarName = varName.replace("fui-dark-color-", "fui-color-").replace("fui-dark-", "fui-");
+        tokens.push(`  --${cssVarName}: ${value};`);
+      }
+    }
+  }
+  return tokens;
+}
+function generateScssTokens(config) {
+  const lines = [];
+  lines.push("// Auto-generated by @fragments-sdk/cli");
+  lines.push(`// Theme: ${config.name}`);
+  if (config.version) {
+    lines.push(`// Version: ${config.version}`);
+  }
+  lines.push("");
+  const colorTokens = generateCategoryTokens(config, "colors", "scss");
+  if (colorTokens.length > 0) {
+    lines.push("// Colors");
+    lines.push(...colorTokens);
+    lines.push("");
+  }
+  const surfaceTokens = generateCategoryTokens(config, "surfaces", "scss");
+  if (surfaceTokens.length > 0) {
+    lines.push("// Surfaces");
+    lines.push(...surfaceTokens);
+    lines.push("");
+  }
+  const textTokens = generateCategoryTokens(config, "text", "scss");
+  if (textTokens.length > 0) {
+    lines.push("// Text");
+    lines.push(...textTokens);
+    lines.push("");
+  }
+  const borderTokens = generateCategoryTokens(config, "borders", "scss");
+  if (borderTokens.length > 0) {
+    lines.push("// Borders");
+    lines.push(...borderTokens);
+    if (config.borders?.default) {
+      lines.push(`$fui-border-default: ${config.borders.default} !default;`);
+    }
+    lines.push("");
+  }
+  const typographyTokens = generateCategoryTokens(config, "typography", "scss");
+  if (typographyTokens.length > 0) {
+    lines.push("// Typography");
+    lines.push(...typographyTokens);
+    lines.push("");
+  }
+  const radiusTokens = generateCategoryTokens(config, "radius", "scss");
+  if (radiusTokens.length > 0) {
+    lines.push("// Border Radius");
+    lines.push(...radiusTokens);
+    lines.push("");
+  }
+  const shadowTokens = generateCategoryTokens(config, "shadows", "scss");
+  if (shadowTokens.length > 0) {
+    lines.push("// Shadows");
+    lines.push(...shadowTokens);
+    lines.push("");
+  }
+  if (config.density) {
+    lines.push("// Density");
+    lines.push(`$fui-density: "${config.density}" !default;`);
+    lines.push("");
+  }
+  const darkTokens = generateDarkTokens(config, "scss");
+  if (darkTokens.length > 0) {
+    lines.push("// Dark Mode");
+    lines.push(...darkTokens);
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function generateCssTokens(config) {
+  const lines = [];
+  lines.push("/* Auto-generated by @fragments-sdk/cli */");
+  lines.push(`/* Theme: ${config.name} */`);
+  if (config.version) {
+    lines.push(`/* Version: ${config.version} */`);
+  }
+  lines.push("");
+  const lightTokens = [];
+  const categories = ["colors", "surfaces", "text", "borders", "typography", "radius", "shadows"];
+  for (const category of categories) {
+    const tokens = generateCategoryTokens(config, category, "css");
+    lightTokens.push(...tokens);
+  }
+  if (config.borders?.default) {
+    lightTokens.push(`  --fui-border-default: ${config.borders.default};`);
+  }
+  if (config.density) {
+    lightTokens.push(`  --fui-density: ${config.density};`);
+  }
+  if (lightTokens.length > 0) {
+    lines.push(":root {");
+    lines.push(...lightTokens);
+    lines.push("}");
+    lines.push("");
+  }
+  const darkTokens = generateDarkTokens(config, "css");
+  if (config.dark?.borders?.default) {
+    darkTokens.push(`  --fui-border-default: ${config.dark.borders.default};`);
+  }
+  if (darkTokens.length > 0) {
+    lines.push(":root.dark,");
+    lines.push(':root[data-theme="dark"] {');
+    lines.push(...darkTokens);
+    lines.push("}");
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+
+// src/commands/create.ts
+function extractFontFamily(cssFontStack) {
+  const match = cssFontStack.match(/^["']?([^"',]+)["']?/);
+  if (!match) return null;
+  const name = match[1].trim();
+  const generics = ["sans-serif", "serif", "monospace", "cursive", "fantasy", "system-ui"];
+  if (generics.includes(name.toLowerCase())) return null;
+  if (name.toLowerCase() === "inter") return null;
+  return name;
+}
+function googleFontsUrl(familyName) {
+  return `https://fonts.googleapis.com/css2?family=${encodeURIComponent(familyName)}:wght@400;500;600;700&display=swap`;
+}
+function detectPackageManager() {
+  const agent = process.env.npm_config_user_agent || "";
+  if (agent.startsWith("pnpm")) return "pnpm";
+  if (agent.startsWith("yarn")) return "yarn";
+  if (agent.startsWith("bun")) return "bun";
+  return "npm";
+}
+function getInstallCommand(pm) {
+  return pm === "yarn" ? "yarn add" : `${pm} add`;
+}
+function getDevInstallCommand(pm) {
+  return pm === "yarn" ? "yarn add -D" : `${pm} add -D`;
+}
+function getRunCommand(pm) {
+  return pm === "npm" ? "npm run" : pm;
+}
+function isValidProjectName(name) {
+  return /^[a-z0-9][a-z0-9._-]*$/.test(name);
+}
+var PRESET_API_URL = "https://canny-otter-874.convex.site/api/theme-presets";
+async function fetchPreset(presetId) {
+  try {
+    const res = await fetch(`${PRESET_API_URL}?id=${encodeURIComponent(presetId)}`);
+    if (!res.ok) return null;
+    const theme = await res.json();
+    if (!theme || !theme.name) return null;
+    return theme;
+  } catch {
+    return null;
+  }
+}
+async function resolveTheme(options) {
+  if (options.preset) {
+    console.log(pc.dim(`  Fetching theme preset ${options.preset}...`));
+    const theme = await fetchPreset(options.preset);
+    if (!theme) {
+      console.error(pc.red(`Error: Could not fetch preset "${options.preset}". It may have expired or the ID is invalid.`));
+      return null;
+    }
+    return theme;
+  }
+  if (options.theme) {
+    const decoded = decompressTheme(options.theme);
+    if (!decoded) {
+      console.error(pc.red("Error: Could not decode theme string. Make sure you copied it from usefragments.com/create"));
+      return null;
+    }
+    return decoded;
+  }
+  if (options.brand) {
+    return {
+      name: "custom",
+      colors: {
+        accent: options.brand
+      }
+    };
+  }
+  return {
+    name: "default",
+    colors: {
+      accent: "#6366f1"
+    }
+  };
+}
+function generateNextjsLayout(themePath, theme) {
+  const fontName = theme?.typography?.fontSans ? extractFontFamily(theme.typography.fontSans) : null;
+  const fontUrl = fontName ? googleFontsUrl(fontName) : null;
+  const htmlOpen = fontUrl ? `    <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="${fontUrl}" rel="stylesheet" />
+      </head>
+      <body>` : `    <html lang="en" suppressHydrationWarning>
+      <body>`;
+  return `import type { Metadata } from 'next';
+import '@fragments-sdk/ui/styles';
+import '${themePath}';
+import { Providers } from './providers';
+
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'Built with Fragments UI',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+${htmlOpen}
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+`;
+}
+function generateNextjsProviders() {
+  return `'use client';
+
+import type { ReactNode } from 'react';
+import { ThemeProvider, TooltipProvider, ToastProvider } from '@fragments-sdk/ui';
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider defaultMode="system">
+      <TooltipProvider>
+        <ToastProvider>{children}</ToastProvider>
+      </TooltipProvider>
+    </ThemeProvider>
+  );
+}
+`;
+}
+function generateNextjsPage() {
+  return `'use client';
+
+import { Button, Card, Stack, Text, Input } from '@fragments-sdk/ui';
+
+export default function Home() {
+  return (
+    <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Card style={{ maxWidth: 480, width: '100%' }}>
+        <Card.Header>
+          <Card.Title>Welcome to Fragments</Card.Title>
+          <Card.Description>Your app is ready. Start building something great.</Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <Stack gap={3}>
+            <Input placeholder="Enter something..." />
+            <Stack direction="row" gap={2}>
+              <Button>Get Started</Button>
+              <Button variant="secondary">Learn More</Button>
+            </Stack>
+          </Stack>
+        </Card.Body>
+      </Card>
+    </main>
+  );
+}
+`;
+}
+function generateViteMain(themePath) {
+  return `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider, TooltipProvider, ToastProvider } from '@fragments-sdk/ui';
+import '@fragments-sdk/ui/styles';
+import '${themePath}';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider defaultMode="system">
+      <TooltipProvider>
+        <ToastProvider>
+          <App />
+        </ToastProvider>
+      </TooltipProvider>
+    </ThemeProvider>
+  </StrictMode>,
+);
+`;
+}
+function generateViteApp() {
+  return `import { Button, Card, Stack, Text, Input } from '@fragments-sdk/ui';
+
+function App() {
+  return (
+    <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Card style={{ maxWidth: 480, width: '100%' }}>
+        <Card.Header>
+          <Card.Title>Welcome to Fragments</Card.Title>
+          <Card.Description>Your app is ready. Start building something great.</Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <Stack gap={3}>
+            <Input placeholder="Enter something..." />
+            <Stack direction="row" gap={2}>
+              <Button>Get Started</Button>
+              <Button variant="secondary">Learn More</Button>
+            </Stack>
+          </Stack>
+        </Card.Body>
+      </Card>
+    </main>
+  );
+}
+
+export default App;
+`;
+}
+function injectFontIntoViteHtml(projectDir, theme) {
+  const fontName = theme.typography?.fontSans ? extractFontFamily(theme.typography.fontSans) : null;
+  if (!fontName) return;
+  const indexPath = join2(projectDir, "index.html");
+  if (!existsSync(indexPath)) return;
+  let html = readFileSync(indexPath, "utf-8");
+  const fontLinks = [
+    '    <link rel="preconnect" href="https://fonts.googleapis.com" />',
+    '    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />',
+    `    <link href="${googleFontsUrl(fontName)}" rel="stylesheet" />`
+  ].join("\n");
+  html = html.replace("</head>", `${fontLinks}
+  </head>`);
+  writeFileSync(indexPath, html, "utf-8");
+}
+async function promptIfMissing(options) {
+  const resolved = { ...options };
+  if (!resolved.name) {
+    if (resolved.yes) {
+      resolved.name = "my-app";
+    } else {
+      try {
+        const { input } = await import("@inquirer/prompts");
+        resolved.name = await input({
+          message: "Project name:",
+          default: "my-app",
+          validate: (val) => isValidProjectName(val) || "Use lowercase letters, numbers, hyphens, dots, underscores"
+        });
+      } catch {
+        resolved.name = "my-app";
+      }
+    }
+  }
+  if (!resolved.template && !resolved.yes) {
+    try {
+      const { select } = await import("@inquirer/prompts");
+      resolved.template = await select({
+        message: "Framework:",
+        choices: [
+          { name: "Next.js (App Router)", value: "nextjs" },
+          { name: "Vite + React", value: "vite" }
+        ],
+        default: "nextjs"
+      });
+    } catch {
+      resolved.template = "nextjs";
+    }
+  }
+  resolved.template = resolved.template || "nextjs";
+  resolved.packageManager = resolved.packageManager || detectPackageManager();
+  return resolved;
+}
+function scaffoldFramework(name, template, pm) {
+  console.log(pc.cyan(`
+Scaffolding ${template === "nextjs" ? "Next.js" : "Vite + React"} project...
+`));
+  if (template === "nextjs") {
+    const cmd = `npx create-next-app@latest ${name} --ts --app --src-dir --no-tailwind --no-eslint --import-alias "@/*" --yes`;
+    execSync(cmd, { stdio: "inherit" });
+  } else {
+    if (pm === "bun") {
+      execSync(`bun create vite ${name} --template react-ts`, { stdio: "inherit" });
+    } else {
+      execSync(`npm create vite@latest ${name} -- --template react-ts`, { stdio: "inherit" });
+    }
+  }
+}
+function installDeps(projectDir, pm, scss) {
+  console.log(pc.cyan("\nInstalling Fragments UI...\n"));
+  const install = getInstallCommand(pm);
+  execSync(`${install} @fragments-sdk/ui`, { cwd: projectDir, stdio: "inherit" });
+  if (scss) {
+    const devInstall = getDevInstallCommand(pm);
+    execSync(`${devInstall} sass`, { cwd: projectDir, stdio: "inherit" });
+  }
+}
+function writeThemeFile(projectDir, theme, scss, template) {
+  const stylesDir = join2(projectDir, "src", "styles");
+  mkdirSync(stylesDir, { recursive: true });
+  const ext = scss ? "scss" : "css";
+  const content = scss ? generateScssTokens(theme) : generateCssTokens(theme);
+  const filePath = join2(stylesDir, `theme.${ext}`);
+  writeFileSync(filePath, content, "utf-8");
+  if (template === "nextjs") {
+    return `../styles/theme.${ext}`;
+  }
+  return `./styles/theme.${ext}`;
+}
+function addNextTranspilePackages(projectDir) {
+  const configCandidates = ["next.config.ts", "next.config.mjs", "next.config.js"];
+  for (const configFile of configCandidates) {
+    const fullPath = join2(projectDir, configFile);
+    if (!existsSync(fullPath)) continue;
+    const content = readFileSync(fullPath, "utf-8");
+    if (content.includes("transpilePackages") && content.includes("@fragments-sdk/ui")) {
+      return;
+    }
+    if (content.includes("transpilePackages")) {
+      return;
+    }
+    const patterns = [
+      {
+        search: /const\s+\w+\s*(?::\s*\w+)?\s*=\s*\{/,
+        replacement: (match) => `${match}
+  transpilePackages: ['@fragments-sdk/ui'],`
+      },
+      {
+        search: /module\.exports\s*=\s*\{/,
+        replacement: (match) => `${match}
+  transpilePackages: ['@fragments-sdk/ui'],`
+      },
+      {
+        search: /export\s+default\s*\{/,
+        replacement: (match) => `${match}
+  transpilePackages: ['@fragments-sdk/ui'],`
+      }
+    ];
+    for (const pattern of patterns) {
+      if (!pattern.search.test(content)) continue;
+      writeFileSync(
+        fullPath,
+        content.replace(pattern.search, pattern.replacement),
+        "utf-8"
+      );
+      return;
+    }
+    return;
+  }
+}
+function rewriteAppFiles(projectDir, template, themePath, theme) {
+  if (template === "nextjs") {
+    const layoutPath = join2(projectDir, "src", "app", "layout.tsx");
+    writeFileSync(layoutPath, generateNextjsLayout(themePath, theme), "utf-8");
+    const providersPath = join2(projectDir, "src", "app", "providers.tsx");
+    writeFileSync(providersPath, generateNextjsProviders(), "utf-8");
+    const pagePath = join2(projectDir, "src", "app", "page.tsx");
+    writeFileSync(pagePath, generateNextjsPage(), "utf-8");
+    const moduleCssPath = join2(projectDir, "src", "app", "page.module.css");
+    try {
+      unlinkSync(moduleCssPath);
+    } catch {
+    }
+    const globalsCssPath = join2(projectDir, "src", "app", "globals.css");
+    try {
+      unlinkSync(globalsCssPath);
+    } catch {
+    }
+    addNextTranspilePackages(projectDir);
+  } else {
+    const mainPath = join2(projectDir, "src", "main.tsx");
+    writeFileSync(mainPath, generateViteMain(themePath), "utf-8");
+    const appPath = join2(projectDir, "src", "App.tsx");
+    writeFileSync(appPath, generateViteApp(), "utf-8");
+    for (const file of ["src/App.css", "src/index.css"]) {
+      try {
+        unlinkSync(join2(projectDir, file));
+      } catch {
+      }
+    }
+    injectFontIntoViteHtml(projectDir, theme);
+  }
+}
+function initGit(projectDir) {
+  try {
+    if (!existsSync(join2(projectDir, ".git"))) {
+      execSync("git init", { cwd: projectDir, stdio: "ignore" });
+      execSync("git add -A", { cwd: projectDir, stdio: "ignore" });
+      execSync('git commit -m "Initial commit with Fragments UI"', { cwd: projectDir, stdio: "ignore" });
+    }
+  } catch {
+  }
+}
+function configureMcp(projectDir) {
+  const mcpConfig = {
+    mcpServers: {
+      fragments: {
+        command: "npx",
+        args: ["-y", "@fragments-sdk/cli", "mcp"]
+      }
+    }
+  };
+  const mcpDir = join2(projectDir, ".mcp");
+  mkdirSync(mcpDir, { recursive: true });
+  writeFileSync(join2(mcpDir, "config.json"), JSON.stringify(mcpConfig, null, 2), "utf-8");
+}
+async function create(options) {
+  console.log(pc.cyan(`
+${BRAND.name} Create
+`));
+  const resolved = await promptIfMissing(options);
+  const name = resolved.name;
+  const template = resolved.template;
+  const pm = resolved.packageManager;
+  if (!isValidProjectName(name)) {
+    return { success: false, error: `Invalid project name: ${name}. Use lowercase letters, numbers, hyphens, dots, underscores.` };
+  }
+  const projectDir = resolve(process.cwd(), name);
+  if (existsSync(projectDir)) {
+    return { success: false, error: `Directory "${name}" already exists.` };
+  }
+  const theme = await resolveTheme(resolved);
+  if (!theme) {
+    return { success: false, error: "Invalid theme configuration." };
+  }
+  scaffoldFramework(name, template, pm);
+  if (!existsSync(projectDir)) {
+    return { success: false, error: "Framework scaffolding failed \u2014 project directory was not created." };
+  }
+  installDeps(projectDir, pm, !!resolved.scss);
+  const themePath = writeThemeFile(projectDir, theme, !!resolved.scss, template);
+  rewriteAppFiles(projectDir, template, themePath, theme);
+  if (resolved.mcp) {
+    configureMcp(projectDir);
+    console.log(pc.dim("  Configured MCP server for AI tooling"));
+  }
+  if (!resolved.noGit) {
+    initGit(projectDir);
+  }
+  const run = getRunCommand(pm);
+  console.log("");
+  console.log(pc.green("  Project created successfully!"));
+  console.log("");
+  console.log(`  ${pc.cyan("cd")} ${name}`);
+  console.log(`  ${pc.cyan(run)} dev`);
+  console.log("");
+  if (theme.name !== "default") {
+    console.log(pc.dim(`  Theme "${theme.name}" applied with full token set.`));
+    console.log(pc.dim(`  Edit src/styles/theme.${resolved.scss ? "scss" : "css"} to customize.
+`));
+  }
+  return { success: true, projectDir };
+}
+export {
+  addNextTranspilePackages,
+  create,
+  generateNextjsLayout,
+  generateNextjsPage,
+  generateNextjsProviders
+};
+//# sourceMappingURL=create-JVAU3YKN.js.map