@fragments-sdk/cli 0.7.9 → 0.7.11

package/src/core/figma.ts

@@ -6,7 +6,7 @@
  *
  * @example
  * ```tsx
- * import { defineFragment, figma } from '@fragments/core';
+ * import { defineFragment, figma } from '@fragments-sdk/cli/core';
  *
  * export default defineFragment({
  *   component: Button,

package/src/core/index.ts

@@ -1,6 +1,6 @@
 /**
- * Browser-safe exports for @fragments/core
- * For Node.js-only APIs (config, discovery, loader), use '@fragments/core/node'
+ * Browser-safe exports for @fragments-sdk/cli/core
+ * For Node.js-only APIs (config, discovery, loader), import from '@fragments-sdk/cli' directly.
  */
 
 // Brand and default constants

package/src/core/loader.ts

@@ -27,8 +27,8 @@ function createFragmentsCoreShimPlugin(): Plugin {
   return {
     name: BRAND.vitePluginNamespace,
     setup(build) {
-      // Intercept @fragments/core imports
-      build.onResolve({ filter: /^@fragments\/core$/ }, (args) => {
+      // Intercept @fragments-sdk/cli/core imports
+      build.onResolve({ filter: /^@fragments-sdk\/cli\/core$/ }, (args) => {
         return {
           path: args.path,
           namespace: BRAND.vitePluginNamespace,
@@ -71,7 +71,7 @@ export async function loadFragmentFile(
 
   try {
     // Use esbuild to bundle the fragment file
-    // We inject a shim for @fragments/core so it doesn't need to be installed
+    // We inject a shim for @fragments-sdk/cli/core so it doesn't need to be installed
     // Using CommonJS format to avoid ESM/CJS interop issues with node_modules
     await build({
       entryPoints: [absolutePath],

package/src/core/schema.ts

@@ -149,7 +149,7 @@ export const fragmentGeneratedSchema = z.object({
  * Schema for AI-specific metadata for playground context generation
  */
 export const aiMetadataSchema = z.object({
-  compositionPattern: z.enum(['compound', 'simple', 'controlled']).optional(),
+  compositionPattern: z.enum(['compound', 'simple', 'controlled', 'wrapper']).optional(),
   subComponents: z.array(z.string()).optional(),
   requiredChildren: z.array(z.string()).optional(),
   commonPatterns: z.array(z.string()).optional(),

package/src/index.ts

@@ -43,6 +43,12 @@ export type { AnalyzeOptions, AnalyzeResult } from "./analyze.js";
 // Static Viewer
 export { generateStaticViewer, generateViewerFromJson } from "./static-viewer.js";
 
+// Config type (used by generated fragments.config.ts)
+export type { FragmentsConfig } from "./core/types.js";
+
+// Fragment definition API (used by generated .fragment.tsx files)
+export { defineFragment, defineBlock } from "./core/defineFragment.js";
+
 // CLI Command metadata (for docs)
 export { CLI_COMMANDS, CLI_COMMAND_CATEGORIES } from "./cli-commands.js";
 export type { CliCommandDef, CliOptionDef, CliCommandCategory, CliCategoryInfo } from "./cli-commands.js";

package/src/migrate/converter.ts

@@ -550,7 +550,7 @@ ${generated.skippedVariants.map(sv => `      { name: "${escapeString(sv.name)}",
   }
 
   // Import the actual component - this makes the fragment immediately usable
-  return `import { defineFragment } from "@fragments/core";
+  return `import { defineFragment } from "@fragments-sdk/cli/core";
 import { ${componentName} } from "${componentImport}";
 
 export default defineFragment({

package/src/service/snippet-validation.test.ts

@@ -45,7 +45,7 @@ describe('validateSnippetPolicy', () => {
       projectDir,
       'Button',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Button } from '.';
 
 export default defineFragment({
@@ -86,7 +86,7 @@ export default defineFragment({
       projectDir,
       'Icon',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Icon } from '.';
 
 export default defineFragment({
@@ -124,7 +124,7 @@ import { House } from '@phosphor-icons/react';
       projectDir,
       'Header',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Header } from '.';
 
 export default defineFragment({
@@ -166,7 +166,7 @@ export default defineFragment({
       projectDir,
       'Alpha',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Alpha } from '.';
 
 export default defineFragment({
@@ -183,7 +183,7 @@ export default defineFragment({
       projectDir,
       'Beta',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Beta } from '.';
 
 export default defineFragment({

package/src/service/snippet-validation.ts

@@ -118,7 +118,6 @@ function normalizePolicy(
 function isFragmentsModule(modulePath: string): boolean {
   return (
     modulePath === '@fragments-sdk/ui'
-    || modulePath === '@fragments/ui'
     || modulePath === '.'
     || modulePath === '..'
     || modulePath.startsWith('@/components/')

package/src/viewer/__tests__/viewer-integration.test.ts

@@ -12,7 +12,7 @@ import { discoverInstalledFragments } from "../../core/discovery.js";
  * After packages were merged into @fragments-sdk/cli, the viewer's
  * path resolution changed. These tests verify that:
  * - Viewer assets (HTML, TSX entry points) are found at the correct paths
- * - The @fragments/core alias resolves to the consolidated core source
+ * - The @fragments-sdk/cli/core alias resolves to the consolidated core source
  * - The virtual module generates valid import statements
  * - The Vite config references correct file system locations
  */
@@ -61,9 +61,9 @@ describe("viewer path resolution", () => {
   });
 });
 
-describe("@fragments/core alias resolution", () => {
+describe("@fragments-sdk/cli/core alias resolution", () => {
   it("core/index.ts exists at the expected path", () => {
-    // server.ts: "@fragments/core": resolve(cliPackageRoot, "src/core/index.ts")
+    // server.ts: "@fragments-sdk/cli/core": resolve(cliPackageRoot, "src/core/index.ts")
     const corePath = resolve(cliPackageRoot, "src/core/index.ts");
     expect(existsSync(corePath)).toBe(true);
   });
@@ -82,32 +82,25 @@ describe("@fragments/core alias resolution", () => {
   });
 });
 
-describe("virtual module @fragments/core import", () => {
-  it("vite-plugin generates import from @fragments/core (resolved via alias)", async () => {
-    // The virtual module template in vite-plugin.ts must import from @fragments/core
+describe("virtual module @fragments-sdk/cli/core import", () => {
+  it("vite-plugin generates import from @fragments-sdk/cli/core (resolved via alias)", async () => {
+    // The virtual module template in vite-plugin.ts must import from @fragments-sdk/cli/core
     // which is resolved by the Vite alias to the consolidated core source
     const pluginPath = resolve(viewerDir, "vite-plugin.ts");
     const content = await readFile(pluginPath, "utf-8");
 
-    // The generated virtual module string should reference @fragments/core
+    // The generated virtual module string should reference @fragments-sdk/cli/core
     expect(content).toContain(
-      'import { storyModuleToFragment, setPreviewConfig } from "@fragments/core"'
+      'import { storyModuleToFragment, setPreviewConfig } from "@fragments-sdk/cli/core"'
     );
   });
 
-  it("server.ts sets up @fragments/core alias to src/core/index.ts", async () => {
+  it("server.ts sets up @fragments-sdk/cli/core alias to src/core/index.ts", async () => {
     const serverPath = resolve(viewerDir, "server.ts");
     const content = await readFile(serverPath, "utf-8");
 
-    // The alias must resolve @fragments/core to the consolidated core
-    expect(content).toContain('"@fragments/core": resolve(cliPackageRoot, "src/core/index.ts")');
-  });
-
-  it("server.ts sets up @fragments/viewer alias", async () => {
-    const serverPath = resolve(viewerDir, "server.ts");
-    const content = await readFile(serverPath, "utf-8");
-
-    expect(content).toContain('"@fragments/viewer": viewerRoot');
+    // The alias must resolve @fragments-sdk/cli/core to the CLI's core source
+    expect(content).toContain('"@fragments-sdk/cli/core": resolve(cliPackageRoot, "src/core/index.ts")');
   });
 
   it("vite-plugin merges authored variant code from metadata fragments", async () => {
@@ -228,20 +221,20 @@ describe("no stale @fragments/* package references", () => {
     const serverPath = resolve(viewerDir, "server.ts");
     const content = await readFile(serverPath, "utf-8");
 
-    // Should NOT try to resolve @fragments/core from node_modules
+    // Should NOT try to resolve @fragments-sdk/cli/core from node_modules
     expect(content).not.toContain('resolveFragmentsPackage("core"');
   });
 
-  it("no source files import from @fragments/core as a runtime dependency", async () => {
+  it("no source files import from @fragments-sdk/cli/core as a runtime dependency", async () => {
     // All source-level imports should use relative paths (../core/).
-    // Only the generated virtual module string uses @fragments/core (resolved via alias).
+    // Only the generated virtual module string uses @fragments-sdk/cli/core (resolved via alias).
     const serverPath = resolve(viewerDir, "server.ts");
     const content = await readFile(serverPath, "utf-8");
 
-    // server.ts should import from relative paths, not @fragments/core
+    // server.ts should import from relative paths, not @fragments-sdk/cli/core
     const lines = content.split("\n");
     const importLines = lines.filter(
-      (l) => l.startsWith("import") && l.includes("@fragments/core")
+      (l) => l.startsWith("import") && l.includes("@fragments-sdk/cli/core")
     );
     expect(importLines).toHaveLength(0);
   });

package/src/viewer/components/AccessibilityPanel.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { Result, NodeResult, ImpactValue, RunOptions } from "axe-core";
-import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState } from "@fragments/ui";
+import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState } from "@fragments-sdk/ui";
 import { BRAND } from "../../core/index.js";
 import {
   updateComponentA11yResult,

package/src/viewer/components/ActionsPanel.tsx

@@ -8,7 +8,7 @@
 import { useState, useMemo } from "react";
 import type { ActionLog } from "../hooks/useActions.js";
 import { formatActionArg } from "../hooks/useActions.js";
-import { Button, Stack, Text, Badge, Input, Menu, Separator } from "@fragments/ui";
+import { Button, Stack, Text, Badge, Input, Menu, Separator } from "@fragments-sdk/ui";
 import {
   TrashIcon,
   ChevronDownIcon,