Merge pull request #140 from webstudio-is/merge-sdk

Merge @webstudio-is/sdk to monorepo

apps/designer/.gitignore

@@ -1,5 +1,3 @@
-node_modules
-
 .cache
 .env
 .vercel

apps/designer/app/canvas/canvas.tsx

@@ -11,7 +11,7 @@ import {
   WrapperComponent,
   globalStyles,
   useSubscribe,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import {
   createElementsTree,
   setInstanceChildrenMutable,

apps/designer/app/canvas/features/wrapper-component/text-editor/editor.tsx

@@ -1,4 +1,4 @@
-import { type ChildrenUpdates, type Instance } from "@webstudio-is/sdk";
+import { type ChildrenUpdates, type Instance } from "@webstudio-is/react-sdk";
 import { RichTextPlugin, HistoryPlugin } from "./lexical";
 import { InstancePlugin } from "./plugins/plugin-instance";
 import { ToolbarConnectorPlugin } from "./plugins/plugin-toolbar-connector";

apps/designer/app/canvas/features/wrapper-component/text-editor/example-text-editor.tsx

@@ -3,7 +3,7 @@ import {
   publish,
   useAllUserProps,
   type Instance,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { createInstance } from "~/shared/tree-utils";
 import { Box, Button } from "~/shared/design-system";
 import { LexicalComposer, ContentEditable } from "./lexical";

apps/designer/app/canvas/features/wrapper-component/text-editor/nodes/node-instance.tsx

@@ -1,5 +1,5 @@
 import { render } from "react-dom";
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import {
   type EditorConfig,
   type SerializedTextNode,

apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-instance.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useSubscribe, type Instance } from "@webstudio-is/sdk";
+import { useSubscribe, type Instance } from "@webstudio-is/react-sdk";
 import { $createInstanceNode, InstanceNode } from "../nodes/node-instance";
 import {
   createCommand,

apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-on-change.tsx

@@ -1,4 +1,4 @@
-import { type ChildrenUpdates } from "@webstudio-is/sdk";
+import { type ChildrenUpdates } from "@webstudio-is/react-sdk";
 import { useState } from "react";
 import { useDebounce } from "react-use";
 import {

apps/designer/app/canvas/features/wrapper-component/text-editor/plugins/plugin-toolbar-connector.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { publish } from "@webstudio-is/sdk";
+import { publish } from "@webstudio-is/react-sdk";
 
 import {
   $isRangeSelection,

apps/designer/app/canvas/features/wrapper-component/text-editor/utils/to-lexical-nodes.tsx

@@ -1,4 +1,4 @@
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import { $createInstanceNode } from "../nodes/node-instance";
 import {
   $createTextNode,

apps/designer/app/canvas/features/wrapper-component/text-editor/utils/to-updates.ts

@@ -1,4 +1,4 @@
-import { type ChildrenUpdates } from "@webstudio-is/sdk";
+import { type ChildrenUpdates } from "@webstudio-is/react-sdk";
 import {
   type SerializedTextNode,
   type SerializedElementNode,

apps/designer/app/canvas/features/wrapper-component/use-css.tsx

@@ -5,7 +5,7 @@ import {
   type CSS,
   useSubscribe,
   toValue,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { type StyleUpdates } from "~/shared/canvas-components";
 
 type UseCssProps = {

apps/designer/app/canvas/features/wrapper-component/use-draggable.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useDrag } from "react-dnd";
-import { type Instance, publish } from "@webstudio-is/sdk";
+import { type Instance, publish } from "@webstudio-is/react-sdk";
 import { type DragData } from "~/shared/canvas-components";
 //import { usePointerOutline } from "~/canvas/hooks";
 

apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx

@@ -6,7 +6,7 @@ import {
   toCss,
   useUserProps,
   renderWrapperComponentChildren,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { primitives } from "~/shared/canvas-components";
 import { useBreakpoints, useTextEditingInstanceId } from "~/shared/nano-states";
 import { useCss } from "./use-css";

apps/designer/app/canvas/shared/breakpoints.ts

@@ -5,7 +5,7 @@ import {
   useSubscribe,
   setBreakpoints,
   publish,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { deleteCssRulesByBreakpoint } from "~/shared/css-utils";
 import {
   breakpointsContainer,

apps/designer/app/canvas/shared/copy-paste.ts

@@ -3,7 +3,7 @@ import {
   type Instance,
   allUserPropsContainer,
   publish,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { selectedInstanceContainer } from "./nano-states";
 import { cloneInstance } from "~/shared/tree-utils";
 import { cloneProps } from "~/shared/props-utils";

apps/designer/app/canvas/shared/immerhin.ts

@@ -1,4 +1,4 @@
-import { allUserPropsContainer } from "@webstudio-is/sdk";
+import { allUserPropsContainer } from "@webstudio-is/react-sdk";
 import store from "immerhin";
 import {
   rootInstanceContainer,

apps/designer/app/canvas/shared/instance.ts

@@ -9,7 +9,7 @@ import {
   useAllUserProps,
   useSubscribe,
   publish,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import {
   deleteInstanceMutable,
   populateInstance,

apps/designer/app/canvas/shared/nano-states.ts

@@ -1,5 +1,5 @@
 import { createValueContainer, useValue } from "react-nano-state";
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import { type DropData } from "~/shared/canvas-components";
 
 const dropDataContainer = createValueContainer<DropData | undefined>();

apps/designer/app/canvas/shared/props.ts

@@ -3,7 +3,7 @@ import {
   useSubscribe,
   allUserPropsContainer,
   DeleteProp,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import store from "immerhin";
 import {
   updateAllUserPropsMutable,

apps/designer/app/canvas/shared/style.ts

@@ -1,5 +1,5 @@
 import store from "immerhin";
-import { useSubscribe } from "@webstudio-is/sdk";
+import { useSubscribe } from "@webstudio-is/react-sdk";
 import { type StyleUpdates } from "~/shared/canvas-components";
 import { setInstanceStyleMutable } from "~/shared/tree-utils";
 import { useSelectedInstance } from "./nano-states";

apps/designer/app/canvas/shared/sync/queue.ts

@@ -1,5 +1,5 @@
 import { type SyncStatus } from "~/shared/sync";
-import { publish } from "@webstudio-is/sdk";
+import { publish } from "@webstudio-is/react-sdk";
 
 // @todo because of limitation with nested models and saving tree as a Json type
 // we load that entire Json to manipulate and if a second request happens before the first one has written

apps/designer/app/canvas/shared/use-drag-drop-handlers.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { publish, useSubscribe } from "@webstudio-is/sdk";
+import { publish, useSubscribe } from "@webstudio-is/react-sdk";
 import { type DragData, type DropData } from "~/shared/canvas-components";
 import { findInstanceById } from "~/shared/tree-utils";
 import {

apps/designer/app/canvas/shared/use-publish-scroll-state.ts

@@ -1,4 +1,4 @@
-import { publish } from "@webstudio-is/sdk";
+import { publish } from "@webstudio-is/react-sdk";
 import { useScrollState } from "~/shared/dom-hooks";
 
 export const usePublishScrollState = () => {

apps/designer/app/canvas/shared/use-shortcuts.ts

@@ -1,6 +1,6 @@
 import { useHotkeys } from "react-hotkeys-hook";
 import store from "immerhin";
-import { type Instance, publish, useSubscribe } from "@webstudio-is/sdk";
+import { type Instance, publish, useSubscribe } from "@webstudio-is/react-sdk";
 import { shortcuts, options } from "~/shared/shortcuts";
 import { useSelectedInstance } from "./nano-states";
 import { copy, paste } from "./copy-paste";

apps/designer/app/canvas/shared/use-track-selected-element.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { type Instance, publish, useSubscribe } from "@webstudio-is/sdk";
+import { type Instance, publish, useSubscribe } from "@webstudio-is/react-sdk";
 import { useSelectedElement, useSelectedInstance } from "./nano-states";
 import {
   useRootInstance,

apps/designer/app/critical-css.ts

@@ -1,7 +1,7 @@
 import {
   insertCriticalCss as insert,
   getCssText as getCanvasCssText,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { getCssText as getDesignerCssText } from "~/shared/design-system";
 import config from "./config";
 

apps/designer/app/designer/designer.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useState } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { type Project, useSubscribe, usePublish } from "@webstudio-is/sdk";
+import {
+  type Project,
+  useSubscribe,
+  usePublish,
+} from "@webstudio-is/react-sdk";
 import type { Config } from "~/config";
 import type {
   HoveredInstanceData,

apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { ChevronRightIcon } from "~/shared/icons";
 import { Button, Flex, Text, darkTheme } from "~/shared/design-system";
 import { useSelectedInstancePath } from "../../shared/instance/use-selected-instance-path";
-import { type Publish, type Instance } from "@webstudio-is/sdk";
+import { type Publish, type Instance } from "@webstudio-is/react-sdk";
 import { useSelectedInstanceData } from "~/designer/shared/nano-states";
 
 type BreadcrumbProps = {

apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
-import { type Breakpoint, type Publish } from "@webstudio-is/sdk";
+import { type Breakpoint, type Publish } from "@webstudio-is/react-sdk";
 import { Button, TextField, Flex, Text } from "~/shared/design-system";
 import { PlusIcon, TrashIcon } from "~/shared/icons";
 import ObjectId from "bson-objectid";

apps/designer/app/designer/features/breakpoints/breakpoints.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
-import { useSubscribe, type Breakpoint, type Publish } from "@webstudio-is/sdk";
+import {
+  useSubscribe,
+  type Breakpoint,
+  type Publish,
+} from "@webstudio-is/react-sdk";
 import {
   DropdownMenu,
   DropdownMenuContent,

apps/designer/app/designer/features/breakpoints/confirmation-dialog.tsx

@@ -1,4 +1,4 @@
-import { type Breakpoint } from "@webstudio-is/sdk";
+import { type Breakpoint } from "@webstudio-is/react-sdk";
 import { Button, Flex, Text } from "~/shared/design-system";
 
 type ConfirmationDialogProps = {

apps/designer/app/designer/features/breakpoints/preview.tsx

@@ -1,4 +1,4 @@
-import { type Breakpoint } from "@webstudio-is/sdk";
+import { type Breakpoint } from "@webstudio-is/react-sdk";
 import { Paragraph, Flex, Text } from "~/shared/design-system";
 
 type PreviewProps = {

apps/designer/app/designer/features/breakpoints/trigger-button.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type ComponentProps, type ElementRef } from "react";
-import { type Breakpoint } from "@webstudio-is/sdk";
+import { type Breakpoint } from "@webstudio-is/react-sdk";
 import {
   useCanvasWidth,
   useZoom,

apps/designer/app/designer/features/breakpoints/use-subscribe-breakpoints.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Breakpoint, useSubscribe } from "@webstudio-is/sdk";
+import { Breakpoint, useSubscribe } from "@webstudio-is/react-sdk";
 import { useSelectedBreakpoint } from "~/designer/shared/nano-states";
 import { sort } from "~/shared/breakpoints";
 import { useBreakpoints } from "~/shared/nano-states";

apps/designer/app/designer/features/breakpoints/use-subscribe-shortcuts.ts

@@ -1,4 +1,4 @@
-import { useSubscribe } from "@webstudio-is/sdk";
+import { useSubscribe } from "@webstudio-is/react-sdk";
 import { sort } from "~/shared/breakpoints";
 import { useBreakpoints } from "~/shared/nano-states";
 import { useZoom, useSelectedBreakpoint } from "../../shared/nano-states";

apps/designer/app/designer/features/breakpoints/use-update-canvas-width.ts

@@ -1,4 +1,4 @@
-import { useSubscribe } from "@webstudio-is/sdk";
+import { useSubscribe } from "@webstudio-is/react-sdk";
 import { useCallback, useEffect } from "react";
 import {
   useSelectedBreakpoint,

apps/designer/app/designer/features/inspector/inspector.tsx

@@ -1,4 +1,4 @@
-import type { Publish } from "@webstudio-is/sdk";
+import type { Publish } from "@webstudio-is/react-sdk";
 import {
   Text,
   Tabs,

apps/designer/app/designer/features/props-panel/control.tsx

@@ -1,4 +1,4 @@
-import { UserProp } from "@webstudio-is/sdk";
+import { UserProp } from "@webstudio-is/react-sdk";
 import React, { ComponentProps } from "react";
 import {
   Flex,

apps/designer/app/designer/features/props-panel/props-panel.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStoryObj } from "@storybook/react";
-import { componentsMeta, type UserProp } from "@webstudio-is/sdk";
+import { componentsMeta, type UserProp } from "@webstudio-is/react-sdk";
 import { PropsPanel } from "./props-panel";
 
 export default {

apps/designer/app/designer/features/props-panel/props-panel.tsx

@@ -3,7 +3,7 @@ import {
   type Instance,
   type Publish,
   type UserProp,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { Control } from "~/designer/features/props-panel/control";
 import { CollapsibleSection, ComponentInfo } from "~/designer/shared/inspector";
 import type { SelectedInstanceData } from "~/shared/canvas-components";

apps/designer/app/designer/features/props-panel/use-props-logic.test.ts

@@ -1,5 +1,5 @@
 import { renderHook, act } from "@testing-library/react-hooks";
-import { components, UserProp } from "@webstudio-is/sdk";
+import { components, UserProp } from "@webstudio-is/react-sdk";
 import { nanoid } from "nanoid";
 import { SelectedInstanceData } from "~/shared/canvas-components";
 import { usePropsLogic } from "./use-props-logic";

apps/designer/app/designer/features/props-panel/use-props-logic.ts

@@ -3,8 +3,8 @@ import type {
   Publish,
   UserProp,
   UserPropsUpdates,
-} from "@webstudio-is/sdk";
-import { componentsMeta } from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
+import { componentsMeta } from "@webstudio-is/react-sdk";
 import ObjectId from "bson-objectid";
 import produce from "immer";
 import uniqBy from "lodash/uniqBy";

apps/designer/app/designer/features/sidebar-left/panels/components/component-thumb.tsx

@@ -1,4 +1,4 @@
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 import { primitives } from "~/shared/canvas-components";
 import { Flex, Text, styled } from "~/shared/design-system";

apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, type MouseEventHandler, useCallback } from "react";
 import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
-import { type Instance, type Publish } from "@webstudio-is/sdk";
+import { type Instance, type Publish } from "@webstudio-is/react-sdk";
 import { Flex } from "~/shared/design-system";
 import { PlusIcon } from "~/shared/icons";
 import { primitives, type DragData } from "~/shared/canvas-components";

apps/designer/app/designer/features/sidebar-left/panels/components/custom-drag-layer.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { useDragLayer, type XYCoord } from "react-dnd";
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import { useCanvasRect, useZoom } from "~/designer/shared/nano-states";
 import { ComponentThumb } from "./component-thumb";
 

apps/designer/app/designer/features/sidebar-left/panels/tree.tsx

@@ -1,4 +1,4 @@
-import { type Instance, type Publish } from "@webstudio-is/sdk";
+import { type Instance, type Publish } from "@webstudio-is/react-sdk";
 import { ListNestedIcon } from "~/shared/icons";
 import { Flex } from "~/shared/design-system";
 import { type SelectedInstanceData } from "~/shared/canvas-components";

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react";
-import { useSubscribe, type Publish } from "@webstudio-is/sdk";
+import { useSubscribe, type Publish } from "@webstudio-is/react-sdk";
 import {
   Box,
   SidebarTabs,

apps/designer/app/designer/features/style-panel/dependencies.ts

@@ -1,4 +1,4 @@
-import type { AppliesTo, StyleProperty } from "@webstudio-is/sdk";
+import type { AppliesTo, StyleProperty } from "@webstudio-is/react-sdk";
 
 const displayInline = [
   "inline",

apps/designer/app/designer/features/style-panel/get-inherited-style.ts

@@ -2,8 +2,8 @@ import {
   properties,
   type StyleValue,
   type StyleProperty,
-} from "@webstudio-is/sdk";
-import { type Instance } from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 
 export type InheritedStyle = {
   [property in StyleProperty]: {

apps/designer/app/designer/features/style-panel/lib/spacing-widget.tsx

@@ -3,7 +3,7 @@ import {
   toValue,
   type StyleProperty,
   type StyleValue,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { Box } from "~/shared/design-system";
 import { SetProperty } from "../use-style-data";
 import { useIsFromCurrentBreakpoint } from "./utils/use-is-from-current-breakpoint";

apps/designer/app/designer/features/style-panel/lib/utils/get-css-rule-for-breakpoint.ts

@@ -1,4 +1,4 @@
-import { type CssRule, type Breakpoint } from "@webstudio-is/sdk";
+import { type CssRule, type Breakpoint } from "@webstudio-is/react-sdk";
 
 /**
  * Find a instance css rule that is set on the provided breakpoint.

apps/designer/app/designer/features/style-panel/lib/utils/use-is-from-current-breakpoint.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { type StyleProperty } from "@webstudio-is/sdk";
+import { type StyleProperty } from "@webstudio-is/react-sdk";
 import {
   useSelectedBreakpoint,
   useSelectedInstanceData,

apps/designer/app/designer/features/style-panel/parse-css-value.ts

@@ -1,6 +1,6 @@
 import hyphenate from "hyphenate-style-name";
-import { units } from "@webstudio-is/sdk";
-import type { StyleProperty, StyleValue, Unit } from "@webstudio-is/sdk";
+import { units } from "@webstudio-is/react-sdk";
+import type { StyleProperty, StyleValue, Unit } from "@webstudio-is/react-sdk";
 
 const unitRegex = new RegExp(`${units.join("|")}`);
 

apps/designer/app/designer/features/style-panel/render-property.tsx

@@ -6,7 +6,7 @@ import {
   type StyleProperty,
   type Category,
   type StyleValue,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import type { SetProperty } from "./use-style-data";
 import type { InheritedStyle } from "./get-inherited-style";
 import { ColorPicker } from "./lib/color-picker";

apps/designer/app/designer/features/style-panel/settings.tsx

@@ -5,7 +5,7 @@ import {
   type CssRule,
   type Category,
   type Style,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import { Flex, Collapsible, Button } from "~/shared/design-system";
 import { TriangleRightIcon, TriangleDownIcon } from "~/shared/icons";
 import { styleConfigs, type StyleConfig } from "~/shared/style-panel-configs";

apps/designer/app/designer/features/style-panel/style-panel.tsx

@@ -1,4 +1,4 @@
-import type { Publish } from "@webstudio-is/sdk";
+import type { Publish } from "@webstudio-is/react-sdk";
 import { willRender } from "~/designer/shared/breakpoints";
 import { Box, Card, Paragraph } from "~/shared/design-system";
 import type { SelectedInstanceData } from "~/shared/canvas-components";

apps/designer/app/designer/features/style-panel/use-style-data.ts

@@ -3,7 +3,7 @@ import type {
   SelectedInstanceData,
   StyleUpdates,
 } from "~/shared/canvas-components";
-import { type StyleProperty, type Publish } from "@webstudio-is/sdk";
+import { type StyleProperty, type Publish } from "@webstudio-is/react-sdk";
 import { useSelectedBreakpoint } from "../../shared/nano-states";
 import { parseCssValue } from "./parse-css-value";
 import { getInheritedStyle } from "./get-inherited-style";

apps/designer/app/designer/features/topbar/menu/menu.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { type Publish } from "@webstudio-is/sdk";
+import { type Publish } from "@webstudio-is/react-sdk";
 import {
   DropdownMenu,
   DropdownMenuContent,

apps/designer/app/designer/features/topbar/preview.tsx

@@ -1,4 +1,4 @@
-import { useSubscribe, type Publish } from "@webstudio-is/sdk";
+import { useSubscribe, type Publish } from "@webstudio-is/react-sdk";
 import { EyeOpenIcon } from "~/shared/icons";
 import { SimpleToggle } from "~/shared/design-system";
 import { useIsPreviewMode } from "~/shared/nano-states";

apps/designer/app/designer/features/topbar/publish.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useFetcher } from "@remix-run/react";
 import { useId } from "@radix-ui/react-id";
 import { RocketIcon, ExternalLinkIcon } from "~/shared/icons";
-import { type Project } from "@webstudio-is/sdk";
+import { type Project } from "@webstudio-is/react-sdk";
 import {
   Button,
   Flex,

apps/designer/app/designer/features/topbar/share.tsx

@@ -8,7 +8,7 @@ import {
   TextField,
 } from "~/shared/design-system";
 import { Share1Icon } from "~/shared/icons";
-import { type Project } from "@webstudio-is/sdk";
+import { type Project } from "@webstudio-is/react-sdk";
 import { useIsShareDialogOpen } from "../../shared/nano-states";
 
 type ShareButtonProps = { path: string; project: Project };

apps/designer/app/designer/features/topbar/topbar.tsx

@@ -1,4 +1,4 @@
-import type { Project, Publish } from "@webstudio-is/sdk";
+import type { Project, Publish } from "@webstudio-is/react-sdk";
 import { darkTheme, Flex, type CSS } from "~/shared/design-system";
 import type { Config } from "~/config";
 import { PreviewButton } from "./preview";

apps/designer/app/designer/features/tree-preview/tree-preview.tsx

@@ -1,4 +1,4 @@
-import { Instance, useSubscribe } from "@webstudio-is/sdk";
+import { Instance, useSubscribe } from "@webstudio-is/react-sdk";
 import produce from "immer";
 import { useState } from "react";
 import { Tree } from "~/designer/shared/tree";

apps/designer/app/designer/features/workspace/canvas-tools/canvas-tools.tsx

@@ -1,4 +1,4 @@
-import { type Publish } from "@webstudio-is/sdk";
+import { type Publish } from "@webstudio-is/react-sdk";
 import { Box } from "~/shared/design-system";
 import {
   useIsPreviewMode,

apps/designer/app/designer/features/workspace/canvas-tools/hooks/use-subscribe-editing-instance-id.ts

@@ -1,4 +1,4 @@
-import { type Instance, useSubscribe } from "@webstudio-is/sdk";
+import { type Instance, useSubscribe } from "@webstudio-is/react-sdk";
 import { useTextEditingInstanceId } from "~/shared/nano-states";
 
 export const useSubscribeTextEditingInstanceId = () => {

apps/designer/app/designer/features/workspace/canvas-tools/hooks/use-subscribe-instance-rect.ts

@@ -1,4 +1,4 @@
-import { useSubscribe } from "@webstudio-is/sdk";
+import { useSubscribe } from "@webstudio-is/react-sdk";
 import {
   useSelectedInstanceRect,
   useHoveredInstanceRect,

apps/designer/app/designer/features/workspace/canvas-tools/hooks/use-subscribe-selection-rect.ts

@@ -1,4 +1,4 @@
-import { useSubscribe } from "@webstudio-is/sdk";
+import { useSubscribe } from "@webstudio-is/react-sdk";
 import { useSelectionRect } from "~/designer/shared/nano-states";
 
 export const useSubscribeSelectionRect = () => {

apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { styled } from "~/shared/design-system";
 import { primitives } from "~/shared/canvas-components";
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 
 type LabelPosition = "top" | "inside" | "bottom";
 type LabelRefCallback = (element: HTMLElement | null) => void;

apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx

@@ -1,4 +1,4 @@
-import { type Instance, type Publish } from "@webstudio-is/sdk";
+import { type Instance, type Publish } from "@webstudio-is/react-sdk";
 import { useMemo, useState, type MouseEventHandler } from "react";
 import {
   useSelectedInstanceData,

apps/designer/app/designer/features/workspace/workspace.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex } from "~/shared/design-system";
 import { useCanvasWidth, useZoom } from "~/designer/shared/nano-states";
 import { CanvasTools } from "./canvas-tools";
-import { type Publish } from "@webstudio-is/sdk";
+import { type Publish } from "@webstudio-is/react-sdk";
 
 const workspaceStyle = {
   flexGrow: 1,

apps/designer/app/designer/shared/breakpoints/will-render.ts

@@ -1,4 +1,4 @@
-import { type Breakpoint } from "@webstudio-is/sdk";
+import { type Breakpoint } from "@webstudio-is/react-sdk";
 
 export const willRender = (breakpoint: Breakpoint, canvasWidth: number) =>
   canvasWidth >= breakpoint.minWidth;

apps/designer/app/designer/shared/client-settings/settings.ts

@@ -1,4 +1,4 @@
-import { useSubscribe } from "@webstudio-is/sdk";
+import { useSubscribe } from "@webstudio-is/react-sdk";
 import { sentryException } from "~/shared/sentry";
 import * as values from "./values";
 

apps/designer/app/designer/shared/instance/use-selected-instance-path.ts

@@ -1,4 +1,4 @@
-import { Instance } from "@webstudio-is/sdk";
+import { Instance } from "@webstudio-is/react-sdk";
 import { useMemo } from "react";
 import { useRootInstance } from "~/shared/nano-states";
 import { getInstancePath } from "~/shared/tree-utils";

apps/designer/app/designer/shared/nano-states/index.ts

@@ -1,5 +1,5 @@
 import { createValueContainer, useValue } from "react-nano-state";
-import { type Breakpoint } from "@webstudio-is/sdk";
+import { type Breakpoint } from "@webstudio-is/react-sdk";
 import {
   type SelectedInstanceData,
   type HoveredInstanceData,

apps/designer/app/designer/shared/shortcuts/use-publish-shortcuts.ts

@@ -1,5 +1,5 @@
 import { useHotkeys } from "react-hotkeys-hook";
-import { type Publish } from "@webstudio-is/sdk";
+import { type Publish } from "@webstudio-is/react-sdk";
 import { shortcuts, options } from "~/shared/shortcuts";
 
 const names = Object.keys(shortcuts) as Array<keyof typeof shortcuts>;

apps/designer/app/designer/shared/tree/tree.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from "react";
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import {
   Flex,
   Text,

apps/designer/app/routes/designer/$id.tsx

@@ -1,6 +1,6 @@
 import { useLoaderData } from "@remix-run/react";
 import { LoaderFunction } from "@remix-run/node";
-import type { Project } from "@webstudio-is/sdk";
+import type { Project } from "@webstudio-is/react-sdk";
 import { Designer, links } from "~/designer";
 import * as db from "~/shared/db";
 import config from "~/config";

apps/designer/app/routes/index.tsx

@@ -1,6 +1,6 @@
 import { redirect, type LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
-import { Root, type Data } from "@webstudio-is/sdk";
+import { Root, type Data } from "@webstudio-is/react-sdk";
 import config from "~/config";
 import * as db from "~/shared/db";
 import Document from "./canvas";

apps/designer/app/routes/preview/$projectId.tsx

@@ -1,6 +1,6 @@
 import { useLoaderData } from "@remix-run/react";
 import type { LoaderFunction } from "@remix-run/node";
-import { Root } from "@webstudio-is/sdk";
+import { Root } from "@webstudio-is/react-sdk";
 import { loadPreviewData, type PreviewData, type ErrorData } from "~/shared/db";
 import env, { Env } from "~/env.server";
 

apps/designer/app/routes/rest/breakpoints.$projectId.ts

@@ -1,5 +1,5 @@
 import type { LoaderFunction } from "@remix-run/node";
-import type { Breakpoint } from "@webstudio-is/sdk";
+import type { Breakpoint } from "@webstudio-is/react-sdk";
 import * as db from "~/shared/db";
 
 export type ErrorData = {

apps/designer/app/routes/rest/patch.ts

@@ -1,7 +1,7 @@
 import { type ActionFunction } from "@remix-run/node";
 import * as db from "~/shared/db";
 import { type SyncItem } from "immerhin";
-import { type Project, type Tree } from "@webstudio-is/sdk";
+import { type Project, type Tree } from "@webstudio-is/react-sdk";
 
 const updaters = {
   root: db.tree.patchRoot,

apps/designer/app/routes/rest/project/clone.$domain.ts

@@ -1,5 +1,5 @@
 import { type LoaderFunction, redirect } from "@remix-run/node";
-import type { User } from "@webstudio-is/sdk";
+import type { User } from "@webstudio-is/react-sdk";
 import * as db from "~/shared/db";
 import { ensureUserCookie } from "~/shared/session";
 import config from "~/config";

apps/designer/app/routes/rest/props.$projectId.ts

@@ -1,5 +1,5 @@
 import { type LoaderFunction } from "@remix-run/node";
-import { type InstanceProps } from "@webstudio-is/sdk";
+import { type InstanceProps } from "@webstudio-is/react-sdk";
 import * as db from "~/shared/db";
 
 type ErrorData = {

apps/designer/app/routes/rest/tree.$projectId.ts

@@ -1,5 +1,5 @@
 import { type LoaderFunction } from "@remix-run/node";
-import type { Tree } from "@webstudio-is/sdk";
+import type { Tree } from "@webstudio-is/react-sdk";
 import * as db from "~/shared/db";
 
 export type ErrorData = {

apps/designer/app/shared/breakpoints/sort.test.ts

@@ -1,4 +1,7 @@
-import { initialBreakpoints, type BaseBreakpoint } from "@webstudio-is/sdk";
+import {
+  initialBreakpoints,
+  type BaseBreakpoint,
+} from "@webstudio-is/react-sdk";
 import { sort } from "./sort";
 
 describe("Breakpoints sorting for visual rendering", () => {

apps/designer/app/shared/canvas-components/draggable.ts

@@ -1,5 +1,5 @@
 import type { XYCoord } from "react-dnd";
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 
 export type DragData = {
   instance: Instance;

apps/designer/app/shared/canvas-components/instance-data.ts

@@ -6,7 +6,7 @@ import {
   type StyleProperty,
   type StyleValue,
   type Breakpoint,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 
 export type SelectedInstanceData = {
   id: Instance["id"];

apps/designer/app/shared/canvas-components/primitives/bold.tsx

@@ -1,4 +1,4 @@
-import { components } from "@webstudio-is/sdk";
+import { components } from "@webstudio-is/react-sdk";
 export { FontBoldIcon as Icon } from "~/shared/icons";
 
 export const canAcceptChild = (): boolean => {

apps/designer/app/shared/canvas-components/primitives/box.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { SquareIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/button.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { ButtonIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/form.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { FormIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/heading.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { HeadingIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/input.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { InputIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/italic.tsx

@@ -1,4 +1,4 @@
-import { components } from "@webstudio-is/sdk";
+import { components } from "@webstudio-is/react-sdk";
 export { FontBoldIcon as Icon } from "~/shared/icons";
 
 export const canAcceptChild = (): boolean => {

apps/designer/app/shared/canvas-components/primitives/link.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { Link2Icon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/paragraph.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { TextAlignLeftIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/canvas-components/primitives/text-block.tsx

@@ -1,4 +1,4 @@
-import { type Style, components } from "@webstudio-is/sdk";
+import { type Style, components } from "@webstudio-is/react-sdk";
 export { TextIcon as Icon } from "~/shared/icons";
 
 // Webstudio specific default styles for the node type.

apps/designer/app/shared/css-utils/delete-css-rules-by-breakpoint.test.ts

@@ -1,4 +1,4 @@
-import { type Instance } from "@webstudio-is/sdk";
+import { type Instance } from "@webstudio-is/react-sdk";
 import { deleteCssRulesByBreakpoint } from "./delete-css-rules-by-breakpoint";
 
 describe("Delete breakpoint", () => {

apps/designer/app/shared/css-utils/delete-css-rules-by-breakpoint.ts

@@ -1,4 +1,4 @@
-import { type Instance, type Breakpoint } from "@webstudio-is/sdk";
+import { type Instance, type Breakpoint } from "@webstudio-is/react-sdk";
 
 export const deleteCssRulesByBreakpoint = (
   instance: Instance,

apps/designer/app/shared/db/breakpoints.server.ts

@@ -4,7 +4,7 @@ import {
   type Tree,
   type Breakpoint,
   BreakpointsSchema,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/react-sdk";
 import ObjectId from "bson-objectid";
 import { applyPatches, type Patch } from "immer";
 import { prisma } from "./prisma.server";