feat: Wrap an instance into any component that can do it (#5508)

Closes #5507

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

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

@@ -13,7 +13,7 @@ import {
   $selectedBreakpoint,
   $selectedBreakpointId,
 } from "~/shared/nano-states";
-import { closeCommandPanel } from "../command-state";
+import { closeCommandPanel, $isCommandPanelOpen } from "../command-state";
 import type { BaseOption } from "../shared/types";
 import { setCanvasWidth } from "~/builder/shared/calc-canvas-width";
 
@@ -24,8 +24,11 @@ export type BreakpointOption = BaseOption & {
 };
 
 export const $breakpointOptions = computed(
-  [$breakpoints, $selectedBreakpoint],
-  (breakpoints, selectedBreakpoint) => {
+  [$isCommandPanelOpen, $breakpoints, $selectedBreakpoint],
+  (isOpen, breakpoints, selectedBreakpoint) => {
+    if (!isOpen) {
+      return [];
+    }
     const sortedBreakpoints = Array.from(breakpoints.values()).sort(
       compareMedia
     );

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

@@ -17,28 +17,38 @@ export type CommandOption = BaseOption & {
   name: string;
   label: string;
   keys?: string[];
+  keepCommandPanelOpen?: boolean;
 };
 
-export const $commandOptions = computed([$commandMetas], (commandMetas) => {
-  const commandOptions: CommandOption[] = [];
-  for (const [name, meta] of commandMetas) {
-    if (!meta.hidden) {
-      const label = meta.label ?? humanizeString(name);
-      const keys = meta.defaultHotkeys?.[0]?.split("+");
-      commandOptions.push({
-        terms: ["shortcuts", "commands", label],
-        type: "command",
-        name,
-        label,
-        keys,
-      });
+import { $isCommandPanelOpen } from "../command-state";
+
+export const $commandOptions = computed(
+  [$isCommandPanelOpen, $commandMetas],
+  (isOpen, commandMetas) => {
+    if (!isOpen) {
+      return [];
+    }
+    const commandOptions: CommandOption[] = [];
+    for (const [name, meta] of commandMetas) {
+      if (!meta.hidden) {
+        const label = meta.label ?? humanizeString(name);
+        const keys = meta.defaultHotkeys?.[0]?.split("+");
+        commandOptions.push({
+          terms: ["shortcuts", "commands", label],
+          type: "command",
+          name,
+          label,
+          keys,
+          keepCommandPanelOpen: meta.keepCommandPanelOpen,
+        });
+      }
     }
+    commandOptions.sort(
+      (left, right) => (left.keys ? 0 : 1) - (right.keys ? 0 : 1)
+    );
+    return commandOptions;
   }
-  commandOptions.sort(
-    (left, right) => (left.keys ? 0 : 1) - (right.keys ? 0 : 1)
-  );
-  return commandOptions;
-});
+);
 
 export const CommandsGroup = ({ options }: { options: CommandOption[] }) => {
   return (
@@ -47,13 +57,15 @@ export const CommandsGroup = ({ options }: { options: CommandOption[] }) => {
       heading={<CommandGroupHeading>Commands</CommandGroupHeading>}
       actions={["execute"]}
     >
-      {options.map(({ name, label, keys }) => (
+      {options.map(({ name, label, keys, keepCommandPanelOpen }) => (
         <CommandItem
           key={name}
           // preserve selected state when rerender
           value={name}
           onSelect={() => {
-            closeCommandPanel();
+            if (!keepCommandPanelOpen) {
+              closeCommandPanel();
+            }
             emitCommand(name as never);
           }}
         >

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

@@ -8,11 +8,7 @@ import {
 } from "@webstudio-is/design-system";
 import { computed } from "nanostores";
 import type { TemplateMeta } from "@webstudio-is/template";
-import {
-  componentCategories,
-  collectionComponent,
-  elementComponent,
-} from "@webstudio-is/sdk";
+import { collectionComponent, elementComponent } from "@webstudio-is/sdk";
 import {
   $registeredComponentMetas,
   $registeredTemplates,
@@ -28,8 +24,12 @@ import {
   getInstanceLabel,
   InstanceIcon,
 } from "~/builder/shared/instance-label";
-import { closeCommandPanel } from "../command-state";
+import { closeCommandPanel, $isCommandPanelOpen } from "../command-state";
 import type { BaseOption } from "../shared/types";
+import {
+  shouldFilterCategory,
+  getComponentScore,
+} from "../shared/component-utils";
 
 export type ComponentOption = BaseOption & {
   type: "component";
@@ -41,48 +41,77 @@ export type ComponentOption = BaseOption & {
   firstInstance: { component: string };
 };
 
-const getComponentScore = (meta: ComponentOption) => {
-  const categoryScore = componentCategories.indexOf(meta.category ?? "hidden");
-  const componentScore = meta.order ?? Number.MAX_SAFE_INTEGER;
-  // shift category
-  return categoryScore * 1000 + componentScore;
-};
-
 export const $componentOptions = computed(
-  [$registeredComponentMetas, $registeredTemplates, $selectedPage],
-  (metas, templates, selectedPage) => {
+  [
+    $isCommandPanelOpen,
+    $registeredComponentMetas,
+    $registeredTemplates,
+    $selectedPage,
+  ],
+  (isOpen, metas, templates, selectedPage) => {
     const componentOptions: ComponentOption[] = [];
-    for (const [name, meta] of metas) {
-      const category = meta.category ?? "hidden";
-      if (category === "hidden" || category === "internal") {
-        continue;
-      }
+    if (!isOpen) {
+      return componentOptions;
+    }
 
+    const addComponentOption = ({
+      name,
+      category,
+      label,
+      icon,
+      order,
+      firstInstance,
+    }: {
+      name: string;
+      category: TemplateMeta["category"];
+      label: string;
+      icon?: string;
+      order?: number;
+      firstInstance: { component: string };
+    }) => {
       // show only xml category and collection component in xml documents
       if (selectedPage?.meta.documentType === "xml") {
         if (category !== "xml" && name !== collectionComponent) {
-          continue;
+          return;
         }
       } else {
         // show everything except xml category in html documents
         if (category === "xml") {
-          continue;
+          return;
         }
       }
-      const label = getInstanceLabel({ component: name });
+
       componentOptions.push({
         terms: ["components", label, category],
         type: "component",
         component: name,
         label,
         category,
+        icon,
+        order,
+        firstInstance,
+      });
+    };
+
+    for (const [name, meta] of metas) {
+      if (shouldFilterCategory(meta.category)) {
+        continue;
+      }
+      const category = meta.category ?? "hidden";
+      const label = meta.label ?? getInstanceLabel({ component: name });
+
+      addComponentOption({
+        name,
+        category,
+        label,
         icon: meta.icon,
         order: meta.order,
         firstInstance: { component: name },
       });
     }
+
     for (const [name, meta] of templates) {
-      if (meta.category === "hidden" || meta.category === "internal") {
+      if (shouldFilterCategory(meta.category)) {
         continue;
       }
 
@@ -91,17 +120,17 @@ export const $componentOptions = computed(
         meta.label ??
         componentMeta?.label ??
         getInstanceLabel({ component: name });
-      componentOptions.push({
-        terms: ["components", label, meta.category],
-        type: "component",
-        component: name,
-        label,
+
+      addComponentOption({
+        name,
         category: meta.category,
+        label,
         icon: meta.icon ?? componentMeta?.icon,
         order: meta.order,
         firstInstance: meta.template.instances[0],
       });
     }
+
     componentOptions.sort(
       (leftOption, rightOption) =>
         getComponentScore(leftOption) - getComponentScore(rightOption)

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

@@ -23,6 +23,7 @@ import { deleteProperty } from "~/builder/features/style-panel/shared/use-style-
 import { InstanceList, showInstance } from "../shared/instance-list";
 import {
   $commandContent,
+  $isCommandPanelOpen,
   closeCommandPanel,
   focusCommandPanel,
 } from "../command-state";
@@ -38,9 +39,12 @@ export type CssVariableOption = BaseOption & {
 };
 
 export const $cssVariableOptions = computed(
-  [$cssVariableDefinitionsByVariable, $unusedCssVariables],
-  (definitionsByVariable, unusedVariables) => {
+  [$isCommandPanelOpen, $cssVariableDefinitionsByVariable, $unusedCssVariables],
+  (isOpen, definitionsByVariable, unusedVariables) => {
     const cssVariableOptions: CssVariableOption[] = [];
+    if (!isOpen) {
+      return cssVariableOptions;
+    }
 
     // Create options for each defined CSS variable on each instance
     for (const [property, instanceIds] of definitionsByVariable) {

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

@@ -12,6 +12,7 @@ import {
 import { $dataSources } from "~/shared/nano-states";
 import {
   $commandContent,
+  $isCommandPanelOpen,
   closeCommandPanel,
   focusCommandPanel,
 } from "../command-state";
@@ -36,9 +37,12 @@ export type DataVariableOption = BaseOption & {
 };
 
 export const $dataVariableOptions = computed(
-  [$dataSources, $usedVariablesInInstances],
-  (dataSources, usedInInstances) => {
+  [$isCommandPanelOpen, $dataSources, $usedVariablesInInstances],
+  (isOpen, dataSources, usedInInstances) => {
     const dataVariableOptions: DataVariableOption[] = [];
+    if (!isOpen) {
+      return dataVariableOptions;
+    }
 
     for (const dataSource of dataSources.values()) {
       if (

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

@@ -10,7 +10,7 @@ import type { Page } from "@webstudio-is/sdk";
 import { $pages, $editingPageId } from "~/shared/nano-states";
 import { $selectedPage, selectPage } from "~/shared/awareness";
 import { setActiveSidebarPanel } from "~/builder/shared/nano-states";
-import { closeCommandPanel } from "../command-state";
+import { closeCommandPanel, $isCommandPanelOpen } from "../command-state";
 import type { BaseOption } from "../shared/types";
 
 export type PageOption = BaseOption & {
@@ -19,8 +19,11 @@ export type PageOption = BaseOption & {
 };
 
 export const $pageOptions = computed(
-  [$pages, $selectedPage],
-  (pages, selectedPage) => {
+  [$isCommandPanelOpen, $pages, $selectedPage],
+  (isOpen, pages, selectedPage) => {
+    if (!isOpen) {
+      return [];
+    }
     const pageOptions: PageOption[] = [];
     if (pages) {
       for (const page of [pages.homePage, ...pages.pages]) {

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

@@ -18,7 +18,7 @@ import { insertWebstudioFragmentAt } from "~/shared/instance-utils";
 import { $selectedInstancePath } from "~/shared/awareness";
 import { InstanceIcon } from "~/builder/shared/instance-label";
 import { isTreeSatisfyingContentModel } from "~/shared/content-model";
-import { closeCommandPanel } from "../command-state";
+import { closeCommandPanel, $isCommandPanelOpen } from "../command-state";
 import type { BaseOption } from "../shared/types";
 
 export type TagOption = BaseOption & {
@@ -27,9 +27,18 @@ export type TagOption = BaseOption & {
 };
 
 export const $tagOptions = computed(
-  [$selectedInstancePath, $instances, $props, $registeredComponentMetas],
-  (instancePath, instances, props, metas) => {
+  [
+    $isCommandPanelOpen,
+    $selectedInstancePath,
+    $instances,
+    $props,
+    $registeredComponentMetas,
+  ],
+  (isOpen, instancePath, instances, props, metas) => {
     const tagOptions: TagOption[] = [];
+    if (!isOpen) {
+      return tagOptions;
+    }
     if (instancePath === undefined) {
       return tagOptions;
     }

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

@@ -21,6 +21,7 @@ import {
 import { InstanceList, showInstance } from "../shared/instance-list";
 import {
   $commandContent,
+  $isCommandPanelOpen,
   closeCommandPanel,
   focusCommandPanel,
 } from "../command-state";
@@ -34,9 +35,12 @@ export type TokenOption = BaseOption & {
 };
 
 export const $tokenOptions = computed(
-  [$styleSources, $styleSourceUsages],
-  (styleSources, styleSourceUsages) => {
+  [$isCommandPanelOpen, $styleSources, $styleSourceUsages],
+  (isOpen, styleSources, styleSourceUsages) => {
     const tokenOptions: TokenOption[] = [];
+    if (!isOpen) {
+      return tokenOptions;
+    }
     for (const styleSource of styleSources.values()) {
       if (styleSource.type !== "token") {
         continue;