start using feature driven architecture

app/canvas/canvas.tsx

@@ -11,21 +11,23 @@ import {
   WrapperComponent,
   globalStyles,
 } from "@webstudio-is/sdk";
-import { publish, useSubscribe } from "./pubsub";
+import { publish, useSubscribe } from "./shared/pubsub";
 import { createElementsTree, setInstanceChildren } from "~/shared/tree-utils";
+import { useDragDropHandlers } from "./shared/use-drag-drop-handlers";
+import { useShortcuts } from "./shared/use-shortcuts";
 import {
-  useDragDropHandlers,
-  useShortcuts,
   usePopulateRootInstance,
-  useUpdateInstanceStyle,
-  usePublishSelectedInstance,
   useInsertInstance,
   useDeleteInstance,
-  usePublishRootInstance,
-  useActiveElementTracking,
   useReparentInstance,
-} from "./hooks";
-import { WrapperComponentDev } from "./wrapper-component";
+} from "./shared/tree";
+import { useUpdateInstanceStyle } from "./shared/style";
+import {
+  usePublishSelectedInstance,
+  usePublishRootInstance,
+} from "./shared/publish";
+import { useActiveElementTracking } from "./shared/active-element";
+import { WrapperComponentDev } from "./features/wrapper-component";
 
 const useElementsTree = (
   rootInstance: Instance,

app/canvas/features/wrapper-component/editable/use-content-editable.tsx

@@ -5,7 +5,7 @@ import ObjectId from "bson-objectid";
 import { type ChildrenUpdates, type Instance } from "@webstudio-is/sdk";
 import { type OnChangeChildren } from "~/shared/tree-utils";
 import { primitives } from "~/shared/component";
-import { useSelectedInstance } from "~/canvas/nano-values";
+import { useSelectedInstance } from "~/canvas/shared/nano-values";
 import { useEditable, type Content } from "./use-editable";
 import { useToolbar } from "./use-toolbar";
 

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

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { type Instance, css as createCss, type CSS } from "@webstudio-is/sdk";
-import { useDragData, useSelectedInstance } from "~/canvas/nano-values";
+import { useDragData, useSelectedInstance } from "~/canvas/shared/nano-values";
 import { primitives } from "~/shared/component";
 
 // @todo this doesn't work with the node at the top edge of the iframe, tag gets hidden.

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react";
 import { useDrag } from "react-dnd";
 import { type Instance } from "@webstudio-is/sdk";
 import { type InitialDragData } from "~/shared/component";
-import { publish } from "../pubsub";
+import { publish } from "../../shared/pubsub";
 //import { usePointerOutline } from "~/canvas/hooks";
 
 type UseDraggable = {

app/canvas/hooks/index.ts

@@ -1,7 +0,0 @@
-export * from "./publish";
-export * from "./style";
-export * from "./tree";
-export * from "./use-drag-drop-handlers";
-export * from "./use-shortcuts";
-export * from "./active-element";
-export * from "./use-pointer-outline";

app/canvas/shared/active-element.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from "react";
-import { findInstanceById } from "~/shared/tree-utils";
 import { type Instance } from "@webstudio-is/sdk";
-import { useSelectedInstance, useSelectedElement } from "../nano-values";
-import { publish, useSubscribe } from "../pubsub";
+import { findInstanceById } from "~/shared/tree-utils";
+import { useSelectedInstance, useSelectedElement } from "./nano-values";
+import { publish, useSubscribe } from "./pubsub";
 
 const eventOptions = {
   passive: true,

app/canvas/shared/publish.ts

@@ -1,14 +1,14 @@
 import { useEffect } from "react";
-import { type SelectedInstanceData } from "~/shared/component";
+import ObjectId from "bson-objectid";
 import {
   getBrowserStyle,
   useAllUserProps,
   type Instance,
   type Tree,
 } from "@webstudio-is/sdk";
-import { useSelectedInstance, useSelectedElement } from "../nano-values";
-import { publish } from "../pubsub";
-import ObjectId from "bson-objectid";
+import { type SelectedInstanceData } from "~/shared/component";
+import { useSelectedInstance, useSelectedElement } from "./nano-values";
+import { publish } from "./pubsub";
 
 export const usePublishSelectedInstance = ({
   treeId,

app/canvas/shared/style.ts

@@ -1,8 +1,8 @@
-import { type StyleUpdates } from "~/shared/component";
 import { type Instance } from "@webstudio-is/sdk";
+import { type StyleUpdates } from "~/shared/component";
 import { setInstanceStyle } from "~/shared/tree-utils";
-import { useSelectedInstance } from "../nano-values";
-import { useSubscribe } from "../pubsub";
+import { useSelectedInstance } from "./nano-values";
+import { useSubscribe } from "./pubsub";
 
 export const useUpdateInstanceStyle = ({
   rootInstance,

app/canvas/shared/tree.ts

@@ -8,8 +8,8 @@ import {
   deleteInstance,
   reparentInstance,
 } from "~/shared/tree-utils";
-import { useSelectedInstance } from "../nano-values";
-import { useSubscribe } from "../pubsub";
+import { useSelectedInstance } from "./nano-values";
+import { useSubscribe } from "./pubsub";
 
 export const usePopulateRootInstance = (tree: Tree) => {
   // Caches initial population of the instance, won't be updated after.

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

@@ -12,8 +12,8 @@ import {
   findInsertionIndex,
   getDragOverInfo,
 } from "~/shared/dom-utils";
-import { useDragData, useSelectedInstance } from "../nano-values";
-import { publish, useSubscribe } from "../pubsub";
+import { useDragData, useSelectedInstance } from "./nano-values";
+import { publish, useSubscribe } from "./pubsub";
 //import {usePointerOutline} from './use-pointer-outline'
 
 // Avoid recalculating rects for each node during dragging.

app/canvas/shared/use-shortcuts.ts

@@ -1,7 +1,7 @@
 import { useHotkeys } from "react-hotkeys-hook";
 import { type Instance } from "@webstudio-is/sdk";
-import { useSelectedInstance } from "../nano-values";
-import { publish } from "../pubsub";
+import { useSelectedInstance } from "./nano-values";
+import { publish } from "./pubsub";
 
 export const useShortcuts = ({ rootInstance }: { rootInstance: Instance }) => {
   const [instance, setSelectedInstance] = useSelectedInstance();

app/designer/designer.tsx

@@ -6,18 +6,22 @@ import type { Config } from "~/config";
 import type { SelectedInstanceData } from "~/shared/component";
 import { Box, Flex, Grid, type CSS } from "~/shared/design-system";
 import interStyles from "~/shared/font-faces/inter.css";
-import { SidebarLeft } from "./sidebar-left";
-import { SidebarRight } from "./inspector";
-import { CanvasIframe, useSubscribe, usePublish } from "./canvas-iframe";
+import { SidebarLeft } from "./features/sidebar-left";
+import { SidebarRight } from "./features/sidebar-right";
+import {
+  CanvasIframe,
+  useSubscribe,
+  usePublish,
+} from "./features/canvas-iframe";
 import {
   useIsPreviewMode,
   useRootInstance,
   useSelectedInstanceData,
-} from "./nano-values";
-import { Topbar } from "./topbar";
+} from "./shared/nano-values";
+import { Topbar } from "./features/topbar";
 import designerStyles from "./designer.css";
-import { useSync } from "./sync";
-import { Breadcrumbs } from "./breadcrumbs";
+import { useSync } from "./features/sync";
+import { Breadcrumbs } from "./features/breadcrumbs";
 
 export const links = () => {
   return [

app/designer/features/breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from "~/shared/icons";
 import { Button, Flex, Text } from "~/shared/design-system";
-import { useSelectedInstancePath } from "../instance/use-selected-instance-path";
+import { useSelectedInstancePath } from "../../shared/instance/use-selected-instance-path";
 import { Instance } from "@webstudio-is/sdk";
 import { Publish } from "../canvas-iframe";
 

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

@@ -1,6 +1,6 @@
 import { type UserProp } from "@webstudio-is/sdk";
-import { CollapsibleSection } from "~/designer/inspector";
-import type { Publish } from "~/designer/canvas-iframe";
+import { CollapsibleSection } from "~/designer/shared/inspector";
+import type { Publish } from "~/designer/features/canvas-iframe";
 import { TextField, Flex, Button } from "~/shared/design-system";
 import { PlusIcon, TrashIcon } from "~/shared/icons";
 import type { SelectedInstanceData } from "~/shared/component";

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

@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import debounce from "lodash.debounce";
 import ObjectId from "bson-objectid";
 import type { DeleteProp, UserProp, UserPropsUpdates } from "@webstudio-is/sdk";
-import type { Publish } from "~/designer/canvas-iframe";
+import type { Publish } from "~/designer/features/canvas-iframe";
 import type { SelectedInstanceData } from "~/shared/component";
 
 const getInitialProp = () => ({

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

@@ -10,7 +10,7 @@ import { type Instance } from "@webstudio-is/sdk";
 import { Flex, Text } from "~/shared/design-system";
 import { Component1Icon } from "~/shared/icons";
 import { primitives, type InitialDragData } from "~/shared/component";
-import { type Publish } from "~/designer/canvas-iframe";
+import { type Publish } from "~/designer/features/canvas-iframe";
 import { CustomDragLayer } from "../custom-drag-layer";
 import type { TabName } from "../types";
 

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

@@ -2,10 +2,10 @@ import { type Instance } from "@webstudio-is/sdk";
 import { ListNestedIcon } from "~/shared/icons";
 import { Flex } from "~/shared/design-system";
 import { type SelectedInstanceData } from "~/shared/component";
-import { type Publish } from "~/designer/canvas-iframe";
-import { useSelectedInstancePath } from "~/designer/instance/use-selected-instance-path";
-import { useRootInstance } from "~/designer/nano-values";
-import { Tree } from "~/designer/tree";
+import { type Publish } from "~/designer/features/canvas-iframe";
+import { useSelectedInstancePath } from "~/designer/shared/instance/use-selected-instance-path";
+import { useRootInstance } from "~/designer/shared/nano-values";
+import { Tree } from "~/designer/shared/tree";
 
 type TabContentProps = {
   publish: Publish;

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

@@ -6,8 +6,8 @@ import {
   SidebarTabsList,
   SidebarTabsTrigger,
 } from "~/shared/design-system";
-import { useSubscribe, type Publish } from "~/designer/canvas-iframe";
-import { useSelectedInstanceData } from "../nano-values";
+import { useSubscribe, type Publish } from "~/designer/features/canvas-iframe";
+import { useSelectedInstanceData } from "../../shared/nano-values";
 import * as panels from "./panels";
 import type { TabName } from "./types";
 

app/designer/features/sidebar-right/index.ts

@@ -0,0 +1 @@
+export * from "./sidebar-right";

app/designer/features/sidebar-right/sidebar-right.tsx

@@ -7,11 +7,11 @@ import {
   Paragraph,
   Box,
 } from "~/shared/design-system";
-import { StylePanel } from "~/designer/style-panel";
-import { SettingsPanel } from "~/designer/settings-panel";
-import type { Publish } from "~/designer/canvas-iframe";
+import { StylePanel } from "~/designer/features/style-panel";
+import { SettingsPanel } from "~/designer/features/settings-panel";
+import type { Publish } from "~/designer/features/canvas-iframe";
 import { BrushIcon, GearIcon } from "~/shared/icons";
-import { useSelectedInstanceData } from "../nano-values";
+import { useSelectedInstanceData } from "~/designer/shared/nano-values";
 
 type SidebarRightProps = {
   publish: Publish;

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

@@ -3,7 +3,7 @@ import { Box, Flex, Collapsible, Button } from "~/shared/design-system";
 import { TriangleRightIcon, TriangleDownIcon } from "~/shared/icons";
 import { categories, type Category, type Style } from "@webstudio-is/sdk";
 import { styleConfigs, type StyleConfig } from "~/shared/style-panel-configs";
-import { CollapsibleSection } from "~/designer/inspector";
+import { CollapsibleSection } from "~/designer/shared/inspector";
 import type { SectionProps } from "./types";
 import { renderProperty } from "./render-property";
 import { dependencies } from "./dependencies";

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

@@ -1,4 +1,4 @@
-import type { Publish } from "~/designer/canvas-iframe";
+import type { Publish } from "~/designer/features/canvas-iframe";
 import { Box } from "~/shared/design-system";
 import type { SelectedInstanceData } from "~/shared/component";
 import { useStyleData } from "./use-style-data";

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

@@ -1,8 +1,8 @@
 import { useState, useMemo, useEffect } from "react";
 import type { SelectedInstanceData, StyleUpdates } from "~/shared/component";
 import { type Style, type StyleProperty } from "@webstudio-is/sdk";
-import { type Publish } from "~/designer/canvas-iframe";
-import { useRootInstance } from "../nano-values";
+import { type Publish } from "~/designer/features/canvas-iframe";
+import { useRootInstance } from "../../shared/nano-values";
 import { parseValue } from "./parse-value";
 import { getInheritedStyle, type InheritedStyle } from "./get-inherited-style";
 

app/designer/features/sync/use-sync.ts

@@ -12,7 +12,7 @@ import type {
   InstanceReparentingSpec,
 } from "~/shared/tree-utils";
 import type { StyleUpdates } from "~/shared/component";
-import { useSubscribe } from "~/designer/canvas-iframe";
+import { useSubscribe } from "~/designer/features/canvas-iframe";
 import { enqueue } from "./queue";
 
 // @todo this entire queueing logic needs to be gone, it's a workaround,

app/designer/features/topbar/menu.tsx

@@ -20,7 +20,7 @@ import {
   useIsPreviewMode,
   useIsShareDialogOpen,
   useIsPublishDialogOpen,
-} from "../nano-values";
+} from "../../shared/nano-values";
 
 type MenuProps = {
   config: Config;

app/designer/features/topbar/preview.tsx

@@ -1,7 +1,7 @@
 import { EyeOpenIcon } from "~/shared/icons";
 import { SimpleToggle } from "~/shared/design-system";
-import { type Publish } from "~/designer/canvas-iframe";
-import { useIsPreviewMode } from "../nano-values";
+import { type Publish } from "~/designer/features/canvas-iframe";
+import { useIsPreviewMode } from "../../shared/nano-values";
 
 type PreviewProps = {
   publish: Publish;

app/designer/features/topbar/publish.tsx

@@ -14,7 +14,7 @@ import {
   Label,
   Link,
 } from "~/shared/design-system";
-import { useIsPublishDialogOpen } from "../nano-values";
+import { useIsPublishDialogOpen } from "../../shared/nano-values";
 
 type PublishProps = { project: Project };
 

app/designer/features/topbar/share.tsx

@@ -9,7 +9,7 @@ import {
 } from "~/shared/design-system";
 import { Share1Icon } from "~/shared/icons";
 import { type Project } from "@webstudio-is/sdk";
-import { useIsShareDialogOpen } from "../nano-values";
+import { useIsShareDialogOpen } from "../../shared/nano-values";
 
 type ShareProps = { path: string; project: Project };
 

app/designer/features/topbar/topbar.tsx

@@ -6,7 +6,7 @@ import { Share } from "./share";
 import { Publish } from "./publish";
 import { SyncStatus } from "./sync-status";
 import { Menu } from "./menu";
-import { type Publish as PublishOnCanvas } from "~/designer/canvas-iframe";
+import { type Publish as PublishOnCanvas } from "~/designer/features/canvas-iframe";
 
 type TopbarProps = {
   config: Config;

app/designer/shared/inspector/index.tsx

@@ -1,2 +1 @@
-export * from "./sidebar-right";
 export * from "./collapsible-section";