Merge remote-tracking branch 'origin/main' into default-time.staging

Author: JayaKrishnaNamburu

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

@@ -39,7 +39,6 @@ import {
 } from "~/shared/nano-states";
 import {
   getComponentTemplateData,
-  getInstanceLabel,
   insertWebstudioFragmentAt,
 } from "~/shared/instance-utils";
 import { humanizeString } from "~/shared/string-utils";
@@ -50,6 +49,10 @@ import { setActiveSidebarPanel } from "~/builder/shared/nano-states";
 import { $commandMetas } from "~/shared/commands-emitter";
 import { emitCommand } from "~/builder/shared/commands";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
+import {
+  getInstanceLabel,
+  InstanceIcon,
+} from "~/builder/shared/instance-label";
 
 const $commandPanel = atom<
   | undefined
@@ -88,7 +91,7 @@ type ComponentOption = {
   component: string;
   label: string;
   category: TemplateMeta["category"];
-  icon: string;
+  icon: undefined | string;
   order: undefined | number;
 };
 
@@ -177,7 +180,7 @@ const $componentOptions = computed(
         component: name,
         label,
         category: meta.category,
-        icon: meta.icon ?? componentMeta?.icon ?? "",
+        icon: meta.icon ?? componentMeta?.icon,
         order: meta.order,
       });
     }
@@ -211,9 +214,9 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
             }}
           >
             <Flex gap={2}>
-              <CommandIcon
-                dangerouslySetInnerHTML={{ __html: icon }}
-              ></CommandIcon>
+              <CommandIcon>
+                <InstanceIcon instance={{ component }} icon={icon} />
+              </CommandIcon>
               <Text variant="labelsTitleCase">
                 {label}{" "}
                 <Text as="span" color="moreSubtle">

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

@@ -31,28 +31,30 @@ import {
 } from "@webstudio-is/design-system";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { dragItemAttribute, useDraggable } from "./use-draggable";
-import { MetaIcon } from "~/builder/shared/meta-icon";
 import {
   $registeredComponentMetas,
   $registeredTemplates,
 } from "~/shared/nano-states";
 import {
   getComponentTemplateData,
-  getInstanceLabel,
   insertWebstudioElementAt,
   insertWebstudioFragmentAt,
 } from "~/shared/instance-utils";
 import type { Publish } from "~/shared/pubsub";
 import { $selectedPage } from "~/shared/awareness";
 import { mapGroupBy } from "~/shared/shim";
+import {
+  getInstanceLabel,
+  InstanceIcon,
+} from "~/builder/shared/instance-label";
 
 type Meta = {
   name: string;
   category: string;
   order: undefined | number;
   label: string;
   description: undefined | string;
-  icon: string;
+  icon?: string;
 };
 
 const $metas = computed(
@@ -85,7 +87,6 @@ const $metas = computed(
         order: componentMeta.order,
         label: getInstanceLabel({ component: name }, componentMeta),
         description: componentMeta.description,
-        icon: componentMeta.icon,
       });
     }
     for (const [name, templateMeta] of templates) {
@@ -111,7 +112,7 @@ const $metas = computed(
           componentMeta?.label ??
           getInstanceLabel({ component: name }, templateMeta),
         description: templateMeta.description,
-        icon: templateMeta.icon ?? componentMeta?.icon ?? "",
+        icon: templateMeta.icon,
       });
     }
     const metasByCategory = mapGroupBy(metas, (meta) => meta.category);
@@ -335,7 +336,14 @@ export const ComponentsPanel = ({
                       {...{ [dragItemAttribute]: meta.name }}
                       label={meta.label}
                       description={meta.description}
-                      icon={<MetaIcon size="auto" icon={meta.icon} />}
+                      icon={
+                        <InstanceIcon
+                          size="auto"
+                          instance={{ component: meta.name }}
+                          // for cases like Sheet template
+                          icon={meta.icon}
+                        />
+                      }
                     />
                   </ListItem>
                 ))}

apps/builder/app/builder/features/components/use-draggable.tsx

@@ -10,11 +10,9 @@ import {
   useDisableCanvasPointerEvents,
   rawTheme,
 } from "@webstudio-is/design-system";
-import { $registeredComponentMetas } from "~/shared/nano-states";
 import { useSubscribe, type Publish } from "~/shared/pubsub";
 import { $canvasRect, $scale } from "~/builder/shared/nano-states";
-import { getInstanceLabel } from "~/shared/instance-utils";
-import { MetaIcon } from "~/builder/shared/meta-icon";
+import { InstanceIcon, InstanceLabel } from "~/builder/shared/instance-label";
 
 const DragLayer = ({
   component,
@@ -23,12 +21,6 @@ const DragLayer = ({
   component: Instance["component"];
   point: Point;
 }) => {
-  const metas = useStore($registeredComponentMetas);
-  const meta = metas.get(component);
-  if (meta === undefined) {
-    return null;
-  }
-
   return createPortal(
     <Flex
       // Container is used to position card
@@ -40,8 +32,8 @@ const DragLayer = ({
       }}
     >
       <ComponentCard
-        label={getInstanceLabel({ component }, meta)}
-        icon={<MetaIcon size="auto" icon={meta.icon} />}
+        label={<InstanceLabel instance={{ component }} />}
+        icon={<InstanceIcon size="auto" instance={{ component }} />}
         style={{
           transform: `translate3d(${point.x}px, ${point.y}px, 0)`,
           width: rawTheme.spacing[20],

apps/builder/app/builder/features/footer/breadcrumbs.tsx

@@ -2,14 +2,12 @@ import { Fragment } from "react";
 import { useStore } from "@nanostores/react";
 import { ChevronRightIcon } from "@webstudio-is/icons";
 import { theme, Button, Flex, Text } from "@webstudio-is/design-system";
-import { $registeredComponentMetas } from "~/shared/nano-states";
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
-import { getInstanceLabel } from "~/shared/instance-utils";
 import { $selectedInstancePath, selectInstance } from "~/shared/awareness";
+import { InstanceLabel } from "~/builder/shared/instance-label";
 
 export const Breadcrumbs = () => {
   const instancePath = useStore($selectedInstancePath);
-  const metas = useStore($registeredComponentMetas);
   return (
     <Flex align="center" css={{ height: "100%", px: theme.spacing[3] }}>
       {instancePath === undefined ? (
@@ -20,10 +18,6 @@ export const Breadcrumbs = () => {
           .slice()
           .reverse()
           .map(({ instance, instanceSelector }, index) => {
-            const meta = metas.get(instance.component);
-            if (meta === undefined) {
-              return;
-            }
             return (
               <Fragment key={index}>
                 <Button
@@ -35,7 +29,7 @@ export const Breadcrumbs = () => {
                     $textEditingInstanceSelector.set(undefined);
                   }}
                 >
-                  {getInstanceLabel(instance, meta)}
+                  <InstanceLabel instance={instance} />
                 </Button>
                 {/* hide the last one */}
                 {index < instancePath.length - 1 && <ChevronRightIcon />}

apps/builder/app/builder/features/marketplace/templates.tsx

@@ -12,6 +12,7 @@ import {
 } from "@webstudio-is/design-system";
 import { ChevronLeftIcon, ExternalLinkIcon } from "@webstudio-is/icons";
 import {
+  elementComponent,
   ROOT_FOLDER_ID,
   type Asset,
   type Page,
@@ -50,9 +51,12 @@ const insertSection = ({
   );
   // remove body and use its children as root insrances
   if (body) {
-    fragment.instances = fragment.instances.filter(
-      (instance) => instance.component !== "Body"
-    );
+    fragment.instances = fragment.instances.filter((instance) => {
+      const isBody =
+        instance.component === "Body" ||
+        (instance.component === elementComponent && instance.tag === "body");
+      return !isBody;
+    });
     fragment.children = body.children;
   }
   const insertable = findClosestInsertable(fragment);

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

@@ -55,8 +55,7 @@ import {
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { serverSyncStore } from "~/shared/sync";
-import { MetaIcon } from "~/builder/shared/meta-icon";
-import { getInstanceLabel, reparentInstance } from "~/shared/instance-utils";
+import { reparentInstance } from "~/shared/instance-utils";
 import { emitCommand } from "~/builder/shared/commands";
 import { useContentEditable } from "~/shared/dom-hooks";
 import {
@@ -69,6 +68,10 @@ import {
   isRichTextContent,
   isTreeSatisfyingContentModel,
 } from "~/shared/content-model";
+import {
+  getInstanceLabel,
+  InstanceIcon,
+} from "~/builder/shared/instance-label";
 
 type TreeItemAncestor =
   | undefined
@@ -430,7 +433,7 @@ const TreeNodeContent = ({
   });
 
   return (
-    <TreeNodeLabel prefix={<MetaIcon icon={meta.icon} />}>
+    <TreeNodeLabel prefix={<InstanceIcon instance={instance} />}>
       <EditableTreeNodeLabel
         ref={mergeRefs(editableRef, ref)}
         {...handlers}
@@ -657,7 +660,9 @@ export const NavigatorTree = () => {
               </Tooltip>
             }
           >
-            <TreeNodeLabel prefix={<MetaIcon icon={rootMeta.icon} />}>
+            <TreeNodeLabel
+              prefix={<InstanceIcon instance={{ component: rootComponent }} />}
+            >
               {rootMeta.label}
             </TreeNodeLabel>
           </TreeNode>

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -29,6 +29,7 @@ import {
   isLiteralExpression,
   documentTypes,
   isRootFolder,
+  elementComponent,
 } from "@webstudio-is/sdk";
 import {
   theme,
@@ -1307,7 +1308,8 @@ const createPage = (pageId: Page["id"], values: Values) => {
       instances.set(rootInstanceId, {
         type: "instance",
         id: rootInstanceId,
-        component: "Body",
+        component: elementComponent,
+        tag: "body",
         children: [],
       });
       registerFolderChildMutable(pages.folders, pageId, values.parentFolderId);

apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx

@@ -46,7 +46,11 @@ export const TagControl = ({ meta, prop }: ControlProps<"tag">) => {
   const instanceTag = instance?.tag;
   const defaultTag = meta.options[0];
   const computedTag = instanceTag ?? propTag ?? defaultTag;
-  const satisfyingTags = useStore($satisfyingTags);
+  let satisfyingTags = useStore($satisfyingTags);
+  // forbid changing tag on body element
+  if (computedTag === "body") {
+    satisfyingTags = ["body"];
+  }
   const options = meta.options.filter((tag) => satisfyingTags.includes(tag));
   const [value, setValue] = useState<undefined | string>();
   const updateTag = (value: string) => {

apps/builder/app/builder/features/settings-panel/property-label.tsx

@@ -17,8 +17,12 @@ import type { Prop } from "@webstudio-is/sdk";
 import { showAttribute } from "@webstudio-is/react-sdk";
 import { updateWebstudioData } from "~/shared/instance-utils";
 import { $selectedInstance } from "~/shared/awareness";
-import { $props, $registeredComponentPropsMetas } from "~/shared/nano-states";
-import { $selectedInstancePropsMetas, humanizeAttribute } from "./shared";
+import { $props } from "~/shared/nano-states";
+import {
+  $selectedInstanceInitialPropNames,
+  $selectedInstancePropsMetas,
+  humanizeAttribute,
+} from "./shared";
 
 const usePropMeta = (name: string) => {
   const store = useMemo(() => {
@@ -78,14 +82,8 @@ const deleteProp = (name: string) => {
 const useIsResettable = (name: string) => {
   const store = useMemo(() => {
     return computed(
-      [$selectedInstance, $registeredComponentPropsMetas],
-      (instance, propsMetas) => {
-        if (name === showAttribute) {
-          return true;
-        }
-        const metas = propsMetas.get(instance?.component ?? "");
-        return metas?.initialProps?.includes(name);
-      }
+      [$selectedInstanceInitialPropNames],
+      (initialPropNames) => name === showAttribute || initialPropNames.has(name)
     );
   }, [name]);
   return useStore(store);
@@ -102,10 +100,8 @@ export const PropertyLabel = ({
   const propMeta = usePropMeta(name);
   const prop = useProp(name);
   const label = propMeta?.label ?? humanizeAttribute(name);
-  // 1. not existing properties cannot be deleted
-  // 2. required properties cannot be deleted
-  // 3. custom attributes like data-* do not have meta and can be deleted
-  const isDeletable = prop && !propMeta?.required;
+  // not existing properties cannot be deleted
+  const isDeletable = prop !== undefined;
   const isResettable = useIsResettable(name);
   return (
     <Flex align="center" css={{ gap: theme.spacing[3] }}>

apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx

@@ -8,10 +8,11 @@ import {
   $selectedInstanceSelector,
 } from "~/shared/nano-states";
 import { getInstanceStyleDecl } from "~/builder/features/style-panel/shared/model";
-import { getInstanceLabel, updateWebstudioData } from "~/shared/instance-utils";
+import { updateWebstudioData } from "~/shared/instance-utils";
 import { toValue } from "@webstudio-is/css-engine";
 import type { AnimationAction } from "@webstudio-is/sdk";
 import { setListedCssProperty } from "./set-css-property";
+import { getInstanceLabel } from "~/builder/shared/instance-label";
 
 const initSubjects = () => {
   const selectedInstanceSelector = $selectedInstanceSelector.get();