feat: API and CLI for everything (#5838)

Closes #5287

Author: kof

apps/builder/app/builder/features/breakpoints/breakpoints-container.tsx

@@ -11,7 +11,8 @@ import { BreakpointsSelector } from "./breakpoints-selector";
 import { BreakpointsMenu } from "./breakpoints-menu";
 import { BreakpointsEditor } from "./breakpoints-editor";
 import { ConfirmationDialog } from "./confirmation-dialog";
-import { $breakpointsMenuView, isBaseBreakpoint } from "~/shared/breakpoints";
+import { $breakpointsMenuView } from "~/shared/breakpoints";
+import { isBaseBreakpoint } from "@webstudio-is/project-build/runtime/breakpoints";
 import { setCanvasWidth } from "../../shared/calc-canvas-width";
 import { serverSyncStore } from "~/shared/sync/sync-stores";
 import type { Breakpoint } from "@webstudio-is/sdk";

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

@@ -26,7 +26,7 @@ import {
   groupBreakpoints,
   hasReachedBreakpointLimit,
   isBaseBreakpoint,
-} from "~/shared/breakpoints";
+} from "@webstudio-is/project-build/runtime/breakpoints";
 import { serverSyncStore } from "~/shared/sync/sync-stores";
 import { ConditionInput } from "./condition-input";
 import { CssValueInput } from "~/builder/features/style-panel/shared/css-value-input";

apps/builder/app/builder/features/breakpoints/breakpoints-menu.tsx

@@ -12,7 +12,7 @@ import {
   Button,
 } from "@webstudio-is/design-system";
 import { EllipsesIcon } from "@webstudio-is/icons";
-import { groupBreakpoints } from "~/shared/breakpoints";
+import { groupBreakpoints } from "@webstudio-is/project-build/runtime/breakpoints";
 import { $selectedBreakpointId } from "~/shared/nano-states";
 import { setCanvasWidth } from "../../shared/calc-canvas-width";
 

apps/builder/app/builder/features/breakpoints/breakpoints-selector.tsx

@@ -17,7 +17,10 @@ import {
   $selectedBreakpointId,
 } from "~/shared/nano-states";
 import { $breakpoints } from "~/shared/sync/data-stores";
-import { groupBreakpoints, isBaseBreakpoint } from "~/shared/breakpoints";
+import {
+  groupBreakpoints,
+  isBaseBreakpoint,
+} from "@webstudio-is/project-build/runtime/breakpoints";
 import { setCanvasWidth } from "../../shared/calc-canvas-width";
 import { $canvasWidth } from "~/builder/shared/nano-states";
 import { useDebouncedCallback } from "use-debounce";

apps/builder/app/builder/features/breakpoints/canvas-settings-popover.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from "@webstudio-is/design-system";
 import { WidthInput } from "./width-input";
-import { minCanvasWidth } from "~/shared/breakpoints";
+import { minCanvasWidth } from "~/shared/breakpoints-utils";
 import { $canvasWidth, $scale } from "~/builder/shared/nano-states";
 import { $selectedBreakpoint } from "~/shared/nano-states";
 import { ChevronDownIcon } from "@webstudio-is/icons";

apps/builder/app/builder/features/breakpoints/cascade-indicator.tsx

@@ -3,7 +3,7 @@ import { useStore } from "@nanostores/react";
 import { css, theme } from "@webstudio-is/design-system";
 import type { Breakpoint, Breakpoints } from "@webstudio-is/sdk";
 import { $breakpoints } from "~/shared/sync/data-stores";
-import { isBaseBreakpoint } from "~/shared/breakpoints";
+import { isBaseBreakpoint } from "@webstudio-is/project-build/runtime/breakpoints";
 
 const cascadeIndicatorStyle = css({
   position: "absolute",

apps/builder/app/builder/features/command-panel/groups/data-variables-group.tsx

@@ -24,7 +24,7 @@ import {
   focusCommandPanel,
 } from "../command-state";
 import { InstanceList, showInstance } from "../shared/instance-list";
-import { deleteVariableMutable } from "~/shared/data-variables";
+import { deleteVariableMutable } from "@webstudio-is/project-build/runtime/data";
 import { updateWebstudioData } from "~/shared/instance-utils/data";
 import {
   DeleteDataVariableDialog,
@@ -33,7 +33,7 @@ import {
 import type { BaseOption } from "../shared/types";
 import { formatUsageCount, getUsageSearchTerms } from "../shared/usage-utils";
 import { getInstanceLabel } from "~/builder/shared/instance-label";
-import { findVariableUsagesByInstance } from "~/shared/data-variables";
+import { findVariableUsagesByInstance } from "@webstudio-is/project-build/runtime/data";
 
 export type DataVariableOption = BaseOption & {
   type: "dataVariable";

apps/builder/app/builder/features/command-panel/groups/duplicate-tokens-group.tsx

@@ -20,7 +20,7 @@ import type { Instance, StyleSource } from "@webstudio-is/sdk";
 import { $styleSources } from "~/shared/sync/data-stores";
 import { $selectedStyleSources } from "~/shared/nano-states";
 import { $styles, $breakpoints } from "~/shared/sync/data-stores";
-import { findDuplicateTokens } from "~/shared/style-source-utils";
+import { findDuplicateTokens } from "@webstudio-is/project-build/runtime/styles";
 import { $styleSourceUsages } from "~/builder/shared/style-source-actions";
 import { InstanceList, showInstance } from "../shared/instance-list";
 import {

apps/builder/app/builder/features/command-panel/groups/instances-group.test.tsx

@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { coreMetas, elementComponent } from "@webstudio-is/sdk";
+import type { Instances } from "@webstudio-is/sdk";
+import { createDefaultPages } from "@webstudio-is/project-build";
+import { $registeredComponentMetas } from "~/shared/nano-states";
+import { $instances, $pages, $props } from "~/shared/sync/data-stores";
+import {
+  $commandSearch,
+  closeCommandPanel,
+  openCommandPanel,
+} from "../command-state";
+import { $instanceOptions } from "./instances-group";
+
+beforeEach(() => {
+  closeCommandPanel();
+  $commandSearch.set("");
+  $instances.set(new Map());
+  $props.set(new Map());
+  $pages.set(undefined);
+  $registeredComponentMetas.set(new Map(Object.entries(coreMetas)));
+});
+
+describe("$instanceOptions", () => {
+  test("does not build instance options until command search has text", () => {
+    const instances: Instances = new Map([
+      [
+        "box",
+        {
+          type: "instance",
+          id: "box",
+          component: elementComponent,
+          tag: "div",
+          children: [],
+        },
+      ],
+    ]);
+    $instances.set(instances);
+    $pages.set(createDefaultPages({ rootInstanceId: "box" }));
+
+    openCommandPanel();
+
+    expect($instanceOptions.get()).toEqual([]);
+
+    $commandSearch.set("box");
+
+    expect($instanceOptions.get()).toHaveLength(1);
+    expect($instanceOptions.get()[0]?.instance.id).toBe("box");
+  });
+});

…el/groups/command-panel-options.test.tsx …command-panel/groups/tags-group.test.tsxapps/builder/app/builder/features/command-panel/groups/command-panel-options.test.tsx renamed to apps/builder/app/builder/features/command-panel/groups/tags-group.test.tsx apps/builder/app/builder/features/command-panel/groups/command-panel-options.test.tsx renamed to apps/builder/app/builder/features/command-panel/groups/tags-group.test.tsx

@@ -13,7 +13,6 @@ import {
   closeCommandPanel,
   openCommandPanel,
 } from "../command-state";
-import { $instanceOptions } from "./instances-group";
 import { $tagOptions } from "./tags-group";
 
 beforeEach(() => {
@@ -26,34 +25,6 @@ beforeEach(() => {
   $registeredComponentMetas.set(new Map(Object.entries(coreMetas)));
 });
 
-describe("$instanceOptions", () => {
-  test("does not build instance options until command search has text", () => {
-    const instances: Instances = new Map([
-      [
-        "box",
-        {
-          type: "instance",
-          id: "box",
-          component: elementComponent,
-          tag: "div",
-          children: [],
-        },
-      ],
-    ]);
-    $instances.set(instances);
-    $pages.set(createDefaultPages({ rootInstanceId: "box" }));
-
-    openCommandPanel();
-
-    expect($instanceOptions.get()).toEqual([]);
-
-    $commandSearch.set("box");
-
-    expect($instanceOptions.get()).toHaveLength(1);
-    expect($instanceOptions.get()[0]?.instance.id).toBe("box");
-  });
-});
-
 describe("$tagOptions", () => {
   test("uses indexed html tags from props when validating content model", () => {
     const instances: Instances = new Map([