@fragments-sdk/cli 0.15.2 → 0.15.4

package/dist/bin.js

@@ -7050,7 +7050,7 @@ program.command("add").argument("[name]", 'Component name (e.g., "Button", "Text
 });
 program.command("create").argument("[name]", "Project name").description("Create a new project with Fragments UI and your custom theme").option("-t, --template <template>", "Framework template (nextjs, vite)", "nextjs").option("--pm <manager>", "Package manager (npm, pnpm, yarn, bun)").option("--theme <encoded>", "Encoded theme string").option("--preset <id>", "Theme preset ID from usefragments.com/create").option("--brand <color>", "Brand color hex (e.g., #6366f1)").option("--scss", "Use SCSS output (installs sass)").option("--mcp", "Configure MCP server for AI tooling").option("-y, --yes", "Skip interactive prompts").option("--no-git", "Skip git initialization").action(async (name, options) => {
   try {
-    const { create } = await import("./create-JVAU3YKN.js");
+    const { create } = await import("./create-LA4J2HHQ.js");
     const result = await create({
       name,
       template: options.template,
@@ -7394,7 +7394,7 @@ governCmd.command("connect").description("Connect your project to the Fragments
 });
 governCmd.command("scan").description("Scan JSX/TSX codebase for governance violations").option("-d, --dir <path>", "Root directory (default: auto-detect)").option("-c, --config <path>", "Path to govern.config.ts").option("-f, --format <format>", "Output format: summary, json, sarif", "summary").option("-q, --quiet", "Suppress non-error output").action(async (options) => {
   try {
-    const { governScan } = await import("./govern-scan-OYFZYOQW.js");
+    const { governScan } = await import("./govern-scan-DW4QUAYD.js");
     const { exitCode } = await governScan({
       dir: options.dir,
       config: options.config,
@@ -7409,7 +7409,7 @@ governCmd.command("scan").description("Scan JSX/TSX codebase for governance viol
 });
 governCmd.command("watch").description("Watch JSX/TSX files and re-check on changes").option("-d, --dir <path>", "Root directory (default: auto-detect)").option("-c, --config <path>", "Path to govern.config.ts").option("-q, --quiet", "Suppress non-error output").option("--debounce <ms>", "Debounce interval in ms", "300").action(async (options) => {
   try {
-    const { governWatch } = await import("./govern-scan-OYFZYOQW.js");
+    const { governWatch } = await import("./govern-scan-DW4QUAYD.js");
     await governWatch({
       dir: options.dir,
       config: options.config,

package/dist/{create-JVAU3YKN.js → create-LA4J2HHQ.js}

@@ -298,72 +298,6 @@ function generateDarkTokens(config, format) {
   }
   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 */");
@@ -536,31 +470,244 @@ export function Providers({ children }: { children: ReactNode }) {
 function generateNextjsPage() {
   return `'use client';
 
-import { Button, Card, Stack, Text, Input } from '@fragments-sdk/ui';
+import { useState } from 'react';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Input,
+  Progress,
+  Separator,
+  Stack,
+  Switch,
+  Tabs,
+  Text,
+  Tooltip,
+} from '@fragments-sdk/ui';
+import styles from './page.module.css';
+
+function StatCard({ label, value, change }: { label: string; value: string; change: string }) {
+  const isPositive = change.startsWith('+');
+  return (
+    <Card>
+      <Card.Body>
+        <Stack gap="xs">
+          <Text size="sm" color="secondary">{label}</Text>
+          <Text size="2xl" weight="semibold">{value}</Text>
+          <Badge variant={isPositive ? 'success' : 'error'} size="sm">{change}</Badge>
+        </Stack>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function TaskItem({ title, done }: { title: string; done?: boolean }) {
+  const [checked, setChecked] = useState(done ?? false);
+  return (
+    <Stack direction="row" align="center" gap="sm">
+      <Checkbox checked={checked} onChange={() => setChecked(!checked)} />
+      <Text size="sm" className={checked ? styles.done : undefined}>{title}</Text>
+    </Stack>
+  );
+}
 
 export default function Home() {
+  const [notifications, setNotifications] = useState(true);
+
   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>
+    <main className={styles.page}>
+      {/* Hero */}
+      <Stack align="center" gap="md" className={styles.hero}>
+        <Badge variant="info">Powered by Fragments UI</Badge>
+        <Text as="h1" size="2xl" weight="bold">Your app is ready</Text>
+        <Text size="lg" color="secondary" className={styles.heroDescription}>
+          This page showcases your custom theme and components.
+          Edit <code>src/app/page.tsx</code> to start building.
+        </Text>
+        <Stack direction="row" gap="sm">
+          <Button size="lg">Start building</Button>
+          <Button size="lg" variant="secondary">Read the docs</Button>
+        </Stack>
+      </Stack>
+
+      <Separator />
+
+      {/* Stats */}
+      <div className={styles.statsGrid}>
+        <StatCard label="Components" value="66" change="+12 this month" />
+        <StatCard label="Design tokens" value="80" change="+5 new" />
+        <StatCard label="Accessibility" value="98%" change="+2.4%" />
+      </div>
+
+      {/* Content */}
+      <div className={styles.contentGrid}>
+        <Card>
+          <Card.Header>
+            <Card.Title>Getting started</Card.Title>
+            <Card.Description>Pick up where you left off</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <Tabs defaultValue="tasks">
+              <Tabs.List>
+                <Tabs.Tab value="tasks">Tasks</Tabs.Tab>
+                <Tabs.Tab value="progress">Progress</Tabs.Tab>
+              </Tabs.List>
+              <Tabs.Panel value="tasks">
+                <Stack gap="sm" className={styles.tabContent}>
+                  <TaskItem title="Install Fragments UI" done />
+                  <TaskItem title="Configure your theme" done />
+                  <TaskItem title="Build your first page" />
+                  <TaskItem title="Set up MCP for AI tooling" />
+                  <TaskItem title="Deploy to production" />
+                </Stack>
+              </Tabs.Panel>
+              <Tabs.Panel value="progress">
+                <Stack gap="md" className={styles.tabContent}>
+                  <Stack gap="xs">
+                    <Stack direction="row" justify="between">
+                      <Text size="sm">Setup</Text>
+                      <Text size="sm" color="secondary">2 of 5</Text>
+                    </Stack>
+                    <Progress value={40} />
+                  </Stack>
+                  <Text size="sm" color="secondary">
+                    Complete the remaining tasks to finish setting up your project.
+                  </Text>
+                </Stack>
+              </Tabs.Panel>
+            </Tabs>
+          </Card.Body>
+        </Card>
+
+        <Card>
+          <Card.Header>
+            <Card.Title>Settings</Card.Title>
+            <Card.Description>Manage your preferences</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <Stack gap="md">
+              <Input placeholder="Search settings..." />
+              <Stack direction="row" align="center" justify="between">
+                <Stack gap="xs">
+                  <Text size="sm" weight="medium">Notifications</Text>
+                  <Text size="xs" color="secondary">Receive alerts for updates</Text>
+                </Stack>
+                <Switch checked={notifications} onChange={() => setNotifications(!notifications)} />
+              </Stack>
+              <Separator />
+              <Stack direction="row" align="center" justify="between">
+                <Stack gap="xs">
+                  <Text size="sm" weight="medium">Theme</Text>
+                  <Text size="xs" color="secondary">System preference detected</Text>
+                </Stack>
+                <Badge variant="default" size="sm">Auto</Badge>
+              </Stack>
+              <Separator />
+              <Stack direction="row" gap="sm" align="center">
+                <Avatar name="You" size="sm" />
+                <Stack gap="xs" className={styles.flex1}>
+                  <Text size="sm" weight="medium">Your account</Text>
+                  <Text size="xs" color="secondary">Manage profile and billing</Text>
+                </Stack>
+                <Tooltip content="Go to account settings">
+                  <Button variant="ghost" size="sm">Manage</Button>
+                </Tooltip>
+              </Stack>
             </Stack>
-          </Stack>
-        </Card.Body>
-      </Card>
+          </Card.Body>
+        </Card>
+      </div>
+
+      {/* Footer */}
+      <Text size="sm" color="secondary" className={styles.footer}>
+        Built with{' '}
+        <a href="https://usefragments.com" className={styles.link}>Fragments UI</a>
+        {' '}&mdash; 66 components, 80 design tokens, accessible by default.
+      </Text>
     </main>
   );
 }
 `;
 }
+function generatePageCssModule() {
+  return `.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--fui-space-6, 3rem) var(--fui-space-3, 1.5rem);
+  gap: var(--fui-space-4, 2rem);
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.hero {
+  text-align: center;
+  padding-top: var(--fui-space-4, 2rem);
+  padding-bottom: var(--fui-space-2, 1rem);
+}
+
+.heroDescription {
+  max-width: 480px;
+}
+
+.heroDescription code {
+  font-size: 0.875em;
+  font-family: var(--fui-font-mono, monospace);
+  background: var(--fui-bg-secondary);
+  padding: 0.125em 0.375em;
+  border-radius: var(--fui-radius-sm, 0.25rem);
+}
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--fui-space-2, 1rem);
+  width: 100%;
+}
+
+.contentGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--fui-space-3, 1.5rem);
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .contentGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.tabContent {
+  padding-top: var(--fui-space-1, 0.75rem);
+}
+
+.done {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.footer {
+  padding-top: var(--fui-space-2, 1rem);
+}
+
+.link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.link:hover {
+  color: var(--fui-color-accent);
+}
+`;
+}
 function generateViteMain(themePath) {
   return `import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -583,32 +730,7 @@ createRoot(document.getElementById('root')!).render(
 `;
 }
 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;
-`;
+  return generateNextjsPage().replace("'use client';\n\n", "").replace("import styles from './page.module.css';", "import styles from './App.module.css';").replace("src/app/page.tsx", "src/App.tsx").replace("export default function Home()", "function App()") + "\nexport default App;\n";
 }
 function injectFontIntoViteHtml(projectDir, theme) {
   const fontName = theme.typography?.fontSans ? extractFontFamily(theme.typography.fontSans) : null;
@@ -677,26 +799,28 @@ Scaffolding ${template === "nextjs" ? "Next.js" : "Vite + React"} project...
     }
   }
 }
-function installDeps(projectDir, pm, scss) {
+function installDeps(projectDir, pm) {
   console.log(pc.cyan("\nInstalling Fragments UI...\n"));
   const install = getInstallCommand(pm);
+  const devInstall = getDevInstallCommand(pm);
   execSync(`${install} @fragments-sdk/ui`, { cwd: projectDir, stdio: "inherit" });
-  if (scss) {
-    const devInstall = getDevInstallCommand(pm);
-    execSync(`${devInstall} sass`, { cwd: projectDir, stdio: "inherit" });
-  }
+  execSync(`${devInstall} sass`, { cwd: projectDir, stdio: "inherit" });
 }
-function writeThemeFile(projectDir, theme, scss, template) {
+function writeThemeFile(projectDir, theme, 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}`);
+  const cssContent = generateCssTokens(theme);
+  const content = `// Fragments UI \u2014 tokens, resets, dark mode
+@use '@fragments-sdk/ui/styles';
+
+// Theme overrides (generated from your preset)
+${cssContent}`;
+  const filePath = join2(stylesDir, "theme.scss");
   writeFileSync(filePath, content, "utf-8");
   if (template === "nextjs") {
-    return `../styles/theme.${ext}`;
+    return "../styles/theme.scss";
   }
-  return `./styles/theme.${ext}`;
+  return "./styles/theme.scss";
 }
 function addNextTranspilePackages(projectDir) {
   const configCandidates = ["next.config.ts", "next.config.mjs", "next.config.js"];
@@ -747,11 +871,8 @@ function rewriteAppFiles(projectDir, template, themePath, theme) {
     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 pageCssPath = join2(projectDir, "src", "app", "page.module.css");
+    writeFileSync(pageCssPath, generatePageCssModule(), "utf-8");
     const globalsCssPath = join2(projectDir, "src", "app", "globals.css");
     try {
       unlinkSync(globalsCssPath);
@@ -763,6 +884,8 @@ function rewriteAppFiles(projectDir, template, themePath, theme) {
     writeFileSync(mainPath, generateViteMain(themePath), "utf-8");
     const appPath = join2(projectDir, "src", "App.tsx");
     writeFileSync(appPath, generateViteApp(), "utf-8");
+    const appCssModulePath = join2(projectDir, "src", "App.module.css");
+    writeFileSync(appCssModulePath, generatePageCssModule(), "utf-8");
     for (const file of ["src/App.css", "src/index.css"]) {
       try {
         unlinkSync(join2(projectDir, file));
@@ -818,8 +941,8 @@ ${BRAND.name} Create
   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);
+  installDeps(projectDir, pm);
+  const themePath = writeThemeFile(projectDir, theme, template);
   rewriteAppFiles(projectDir, template, themePath, theme);
   if (resolved.mcp) {
     configureMcp(projectDir);
@@ -837,7 +960,7 @@ ${BRAND.name} Create
   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.
+    console.log(pc.dim(`  Edit src/styles/theme.scss to customize.
 `));
   }
   return { success: true, projectDir };
@@ -847,6 +970,7 @@ export {
   create,
   generateNextjsLayout,
   generateNextjsPage,
-  generateNextjsProviders
+  generateNextjsProviders,
+  generatePageCssModule
 };
-//# sourceMappingURL=create-JVAU3YKN.js.map
+//# sourceMappingURL=create-LA4J2HHQ.js.map