refactor: move component meta to sdk

apps/builder/app/builder/features/ai/ai-fetch-result.ts

@@ -12,9 +12,13 @@ import {
   getIndexesWithinAncestors,
   idAttribute,
   componentAttribute,
-  type WsEmbedTemplate,
 } from "@webstudio-is/react-sdk";
-import { Instance, createScope, findTreeInstanceIds } from "@webstudio-is/sdk";
+import {
+  type WsEmbedTemplate,
+  Instance,
+  createScope,
+  findTreeInstanceIds,
+} from "@webstudio-is/sdk";
 import { computed } from "nanostores";
 import {
   $dataSources,

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -2,10 +2,7 @@ import { atom, computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { useState } from "react";
 import { matchSorter } from "match-sorter";
-import {
-  collectionComponent,
-  componentCategories,
-} from "@webstudio-is/react-sdk";
+import { collectionComponent } from "@webstudio-is/react-sdk";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   Command,
@@ -25,6 +22,7 @@ import {
   Separator,
 } from "@webstudio-is/design-system";
 import { compareMedia } from "@webstudio-is/css-engine";
+import { componentCategories } from "@webstudio-is/sdk";
 import type { Breakpoint, Page } from "@webstudio-is/sdk";
 import type { TemplateMeta } from "@webstudio-is/template";
 import {

apps/builder/app/builder/features/components/components.tsx

@@ -4,11 +4,8 @@ import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { XIcon } from "@webstudio-is/icons";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
-import {
-  type WsComponentMeta,
-  collectionComponent,
-  componentCategories,
-} from "@webstudio-is/react-sdk";
+import { type WsComponentMeta, componentCategories } from "@webstudio-is/sdk";
+import { collectionComponent } from "@webstudio-is/react-sdk";
 import {
   theme,
   Flex,

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -24,11 +24,14 @@ import {
   blockComponent,
   rootComponent,
   showAttribute,
-  WsComponentMeta,
   blockTemplateComponent,
   descendantComponent,
 } from "@webstudio-is/react-sdk";
-import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
+import {
+  ROOT_INSTANCE_ID,
+  type Instance,
+  type WsComponentMeta,
+} from "@webstudio-is/sdk";
 import {
   EyeClosedIcon,
   EyeOpenIcon,

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -18,8 +18,9 @@ import {
   type Breakpoint,
   type Instance,
   type StyleDecl,
+  type WsComponentMeta,
 } from "@webstudio-is/sdk";
-import { rootComponent, WsComponentMeta } from "@webstudio-is/react-sdk";
+import { rootComponent } from "@webstudio-is/react-sdk";
 import {
   $breakpoints,
   $instances,

apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx

@@ -48,7 +48,7 @@ import {
   useCallback,
 } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { type ComponentState, stateCategories } from "@webstudio-is/react-sdk";
+import { type ComponentState, stateCategories } from "@webstudio-is/sdk";
 import {
   type ItemSource,
   type StyleSourceError,

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -14,7 +14,12 @@ import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRefs } from "@react-aria/utils";
-import type { Instance, Instances, Prop } from "@webstudio-is/sdk";
+import type {
+  Instance,
+  Instances,
+  Prop,
+  WsComponentMeta,
+} from "@webstudio-is/sdk";
 import { findTreeInstanceIds } from "@webstudio-is/sdk";
 import {
   idAttribute,
@@ -30,7 +35,6 @@ import {
   blockComponent,
   blockTemplateComponent,
   editingPlaceholderVariable,
-  WsComponentMeta,
   editablePlaceholderVariable,
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";

apps/builder/app/shared/copy-paste/plugin-embed-template.ts

@@ -1,8 +1,6 @@
 import { z } from "zod";
-import {
-  WsEmbedTemplate,
-  generateDataFromEmbedTemplate,
-} from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate } from "@webstudio-is/sdk";
+import { generateDataFromEmbedTemplate } from "@webstudio-is/react-sdk";
 import { $registeredComponentMetas } from "../nano-states";
 import {
   findClosestInsertable,

apps/builder/app/shared/instance-utils.test.tsx

@@ -1,10 +1,6 @@
 import { enableMapSet } from "immer";
 import { describe, test, expect, beforeEach } from "vitest";
-import {
-  portalComponent,
-  collectionComponent,
-  type WsComponentMeta,
-} from "@webstudio-is/react-sdk";
+import { portalComponent, collectionComponent } from "@webstudio-is/react-sdk";
 import type { Project } from "@webstudio-is/project";
 import { createDefaultPages } from "@webstudio-is/project-build";
 import {
@@ -34,6 +30,7 @@ import type {
   StyleSourceSelections,
   WebstudioData,
   WebstudioFragment,
+  WsComponentMeta,
 } from "@webstudio-is/sdk";
 import { encodeDataSourceVariable, getStyleDeclKey } from "@webstudio-is/sdk";
 import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";

apps/builder/app/shared/instance-utils.ts

@@ -4,21 +4,22 @@ import { equalMedia, type StyleValue } from "@webstudio-is/css-engine";
 import {
   type Instances,
   type StyleSource,
-  getStyleDeclKey,
-  findTreeInstanceIds,
-  Instance,
-  StyleSourceSelection,
-  StyleDecl,
-  Asset,
-  StyleSources,
-  Breakpoints,
-  DataSources,
-  Props,
-  DataSource,
-  Breakpoint,
+  type Instance,
+  type StyleSourceSelection,
+  type StyleDecl,
+  type Asset,
+  type StyleSources,
+  type Breakpoints,
+  type DataSources,
+  type Props,
+  type DataSource,
+  type Breakpoint,
   type WebstudioFragment,
   type WebstudioData,
   type Resource,
+  type WsComponentMeta,
+  getStyleDeclKey,
+  findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,
   decodeDataSourceVariable,
   encodeDataSourceVariable,
@@ -27,7 +28,6 @@ import {
   ROOT_INSTANCE_ID,
 } from "@webstudio-is/sdk";
 import {
-  type WsComponentMeta,
   generateDataFromEmbedTemplate,
   portalComponent,
   collectionComponent,

apps/builder/app/shared/matcher.test.tsx

@@ -7,8 +7,7 @@ import {
 } from "@webstudio-is/template";
 import { coreMetas } from "@webstudio-is/react-sdk";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
-import type { WsComponentMeta } from "@webstudio-is/react-sdk";
-import type { Matcher } from "@webstudio-is/sdk";
+import type { Matcher, WsComponentMeta } from "@webstudio-is/sdk";
 import {
   findClosestNonTextualContainer,
   findClosestInstanceMatchingFragment,

apps/builder/app/shared/matcher.ts

@@ -6,9 +6,9 @@ import {
   type MatcherOperation,
   type MatcherRelation,
   type WebstudioFragment,
+  type WsComponentMeta,
 } from "@webstudio-is/sdk";
 import type { InstanceSelector } from "./tree-utils";
-import type { WsComponentMeta } from "@webstudio-is/react-sdk";
 
 const isNegated = (operation?: MatcherOperation) => {
   return operation?.$neq !== undefined || operation?.$nin !== undefined;

apps/builder/app/shared/nano-states/components.ts

@@ -4,15 +4,17 @@ import type { ExoticComponent } from "react";
 import { atom, computed } from "nanostores";
 import {
   type AnyComponent,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
   type Hook,
   type HookContext,
   namespaceMeta,
   getIndexesWithinAncestors,
   type InstanceData,
 } from "@webstudio-is/react-sdk";
-import type { Instance } from "@webstudio-is/sdk";
+import type {
+  Instance,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "@webstudio-is/sdk";
 import type { InstanceSelector } from "../tree-utils";
 import { $memoryProps, $props } from "./misc";
 import { $instances } from "./instances";

apps/builder/app/shared/tree-utils.ts

@@ -1,5 +1,6 @@
 import { nanoid } from "nanoid";
-import {
+import { shallowEqual } from "shallow-equal";
+import type {
   Instance,
   Instances,
   Prop,
@@ -8,13 +9,10 @@ import {
   Styles,
   StyleSource,
   StyleSourceSelection,
+  WsComponentMeta,
 } from "@webstudio-is/sdk";
 import { findTreeInstanceIds } from "@webstudio-is/sdk";
-import {
-  collectionComponent,
-  type WsComponentMeta,
-} from "@webstudio-is/react-sdk";
-import { shallowEqual } from "shallow-equal";
+import { collectionComponent } from "@webstudio-is/react-sdk";
 
 // slots can have multiple parents so instance should be addressed
 // with full rendered path to avoid double selections with slots

packages/ai/src/chains/operations/edit-styles.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
-import { EmbedTemplateStyleDecl, idAttribute } from "@webstudio-is/react-sdk";
+import { EmbedTemplateStyleDecl } from "@webstudio-is/sdk";
+import { idAttribute } from "@webstudio-is/react-sdk";
 
 export const name = "edit-styles";
 

packages/ai/src/chains/operations/generate-insert-template.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
-import { WsEmbedTemplate, idAttribute } from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate } from "@webstudio-is/sdk";
+import { idAttribute } from "@webstudio-is/react-sdk";
 
 // Currently this operation is used is a separate LLM call after the main one has returned an insert-instance operation. This is to produce better results.
 // Effectively the aiOperation from this module is not used. The separate chain will call the LLM and we use the resulting completion to construct an aiOperation by hand

packages/ai/src/chains/template-generator/chain.server.ts

@@ -2,7 +2,7 @@ import type { Model as BaseModel, ModelMessage, Chain } from "../../types";
 import { formatPrompt } from "../../utils/format-prompt";
 import { prompt as promptSystemTemplate } from "./__generated__/template-generator.system.prompt";
 import { prompt as promptUserTemplate } from "./__generated__/template-generator.user.prompt";
-import { WsEmbedTemplate } from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate } from "@webstudio-is/sdk";
 import {
   jsxToTemplate,
   postProcessTemplate,

packages/ai/src/chains/template-generator/schema.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { WsEmbedTemplate } from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate } from "@webstudio-is/sdk";
 
 export const name = "template-generator";
 

packages/ai/src/image.ts

@@ -2,7 +2,7 @@ import type {
   EmbedTemplateInstance,
   EmbedTemplateProp,
   WsEmbedTemplate,
-} from "@webstudio-is/react-sdk";
+} from "@webstudio-is/sdk";
 
 const isRemoteImageGeneratedByAi = (url: string) => {
   // wsai search param is added when image is queried by ai

packages/ai/src/utils/jsx-to-template.server.ts

@@ -4,7 +4,7 @@ import {
   tailwindToWebstudio,
   traverseTemplate,
 } from "@webstudio-is/jsx-utils";
-import { WsEmbedTemplate } from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate } from "@webstudio-is/sdk";
 
 export const jsxToTemplate = async (jsx: string) => {
   const template = await jsxToWSEmbedTemplate(jsx);

packages/jsx-utils/package.json

@@ -28,7 +28,6 @@
   "sideEffects": false,
   "dependencies": {
     "@webstudio-is/css-data": "workspace:*",
-    "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
     "acorn": "^8.14.0",
     "acorn-jsx": "^5.3.2",

packages/jsx-utils/src/heroicons/index.ts

@@ -1,4 +1,4 @@
-import type { WsEmbedTemplate } from "@webstudio-is/react-sdk";
+import type { WsEmbedTemplate } from "@webstudio-is/sdk";
 import { traverseTemplate } from "../traverse-template";
 import { getIcon } from "./get-icon";
 

packages/jsx-utils/src/jsx.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { EmbedTemplateProp, WsEmbedTemplate } from "@webstudio-is/react-sdk";
+import { EmbedTemplateProp, WsEmbedTemplate } from "@webstudio-is/sdk";
 import { jsxToWSEmbedTemplate } from "./jsx";
 import { traverseTemplate } from "./traverse-template";
 

packages/jsx-utils/src/jsx.ts

@@ -1,7 +1,4 @@
-import {
-  WsEmbedTemplate,
-  type EmbedTemplateProp,
-} from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate, type EmbedTemplateProp } from "@webstudio-is/sdk";
 import JSON5 from "json5";
 import type { JsonObject } from "type-fest";
 import type { JSXElement, JSXOpeningElement, JSXText } from "./parser";

packages/jsx-utils/src/traverse-template.ts

@@ -1,4 +1,4 @@
-import { WsEmbedTemplate } from "@webstudio-is/react-sdk";
+import { WsEmbedTemplate } from "@webstudio-is/sdk";
 
 type ElementType<T> = T extends (infer U)[] ? U : never;
 

packages/jsx-utils/src/tw-to-webstudio.ts

@@ -1,6 +1,6 @@
-import type { WsEmbedTemplate } from "@webstudio-is/react-sdk";
-import { traverseTemplateAsync } from "./traverse-template";
+import type { WsEmbedTemplate } from "@webstudio-is/sdk";
 import { parseTailwindToWebstudio } from "@webstudio-is/css-data";
+import { traverseTemplateAsync } from "./traverse-template";
 
 export const tailwindToWebstudio = async (template: WsEmbedTemplate) => {
   return traverseTemplateAsync(template, async (node) => {

packages/react-sdk/src/core-components.ts

@@ -6,10 +6,7 @@ import {
   AddTemplateInstanceIcon,
 } from "@webstudio-is/icons/svg";
 import { html } from "@webstudio-is/sdk/normalize.css";
-import type {
-  WsComponentMeta,
-  WsComponentPropsMeta,
-} from "./components/component-meta";
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 
 export const rootComponent = "ws:root";
 

packages/react-sdk/src/css/css.ts

@@ -15,8 +15,8 @@ import {
   type Props,
   type StyleSourceSelections,
   type Styles,
+  type WsComponentMeta,
 } from "@webstudio-is/sdk";
-import type { WsComponentMeta } from "../components/component-meta";
 import { descendantComponent, rootComponent } from "../core-components";
 import { addGlobalRules } from "./global-rules";
 import { kebabCase } from "change-case";