build: release 19-05-2025

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

@@ -7,6 +7,7 @@ import {
   type Instance,
   type Props,
   descendantComponent,
+  rootComponent,
 } from "@webstudio-is/sdk";
 import {
   theme,
@@ -344,7 +345,7 @@ export const PropsSectionContainer = ({
   });
 
   const propsMetas = useStore($selectedInstancePropsMetas);
-  if (propsMetas.size === 0) {
+  if (propsMetas.size === 0 || instance.component === rootComponent) {
     return;
   }
 

apps/builder/app/canvas/collapsed.ts

@@ -10,6 +10,7 @@ import {
 import { $selectedBreakpoint } from "~/shared/nano-states";
 import { $selectedPage } from "~/shared/awareness";
 import { serverSyncStore } from "~/shared/sync";
+import { doNotTrackMutation } from "~/shared/dom-utils";
 
 const isHtmlTag = (tag: string): tag is HtmlTags =>
   htmlTags.includes(tag as HtmlTags);
@@ -34,22 +35,6 @@ const isSelectorSupported = (selector: string) => {
   }
 };
 
-// This mark helps us detect if mutations were caused by the collapse algorithm
-const markCollapsedMutationProperty = `--ws-sys-collapsed-mutation`;
-
-/**
- * Avoid infinite loop of mutations
- */
-export const hasCollapsedMutationRecord = (
-  mutationRecords: MutationRecord[]
-) => {
-  return mutationRecords.some((record) =>
-    record.type === "attributes"
-      ? (record.oldValue?.includes(markCollapsedMutationProperty) ?? false)
-      : false
-  );
-};
-
 const getInstanceSize = (instanceId: string, tagName: HtmlTags | undefined) => {
   const metas = $registeredComponentMetas.get();
   const breakpoints = $breakpoints.get();
@@ -246,14 +231,25 @@ const recalculate = () => {
   // If most elements are collapsed at the next step, scrollHeight becomes equal to clientHeight,
   // which resets the scroll position. To prevent this, we set the document's height to the current scrollHeight
   // to preserve the scroll position.
-  const preserveHeight = document.documentElement.style.height;
-
-  // Mark that we are in the process of recalculating collapsed elements
-  document.documentElement.style.setProperty(
-    markCollapsedMutationProperty,
-    `true`
-  );
-  document.documentElement.style.height = `${document.documentElement.scrollHeight}px`;
+  // use nested element to avoid full page repaint and freeze on big projects
+  let collapsedElement = document.querySelector(
+    "#ws-collapsed"
+  ) as null | HTMLElement;
+  if (!collapsedElement) {
+    collapsedElement = document.createElement("div") as HTMLElement;
+    collapsedElement.style.position = "absolute";
+    collapsedElement.style.top = "0px";
+    collapsedElement.style.left = "0px";
+    collapsedElement.style.right = "0px";
+    collapsedElement.setAttribute("id", "ws-collapsed");
+    collapsedElement.setAttribute("hidden", "true");
+    // Mark that we are in the process of recalculating collapsed elements
+    // to avoid infinite loop of mutations
+    doNotTrackMutation(collapsedElement);
+    document.documentElement.appendChild(collapsedElement);
+  }
+  collapsedElement.removeAttribute("hidden");
+  collapsedElement.style.height = `${document.documentElement.scrollHeight}px`;
 
   // Now combine all operations in batches.
 
@@ -299,8 +295,7 @@ const recalculate = () => {
     element.setAttribute(collapsedAttribute, value);
   }
 
-  document.documentElement.style.height = preserveHeight;
-  document.documentElement.style.removeProperty(markCollapsedMutationProperty);
+  collapsedElement.setAttribute("hidden", "true");
 };
 
 /**

apps/builder/app/canvas/instance-selected.ts

@@ -27,10 +27,7 @@ import {
 } from "~/shared/dom-utils";
 import { subscribeScrollState } from "~/canvas/shared/scroll-state";
 import { $selectedInstanceOutline } from "~/shared/nano-states";
-import {
-  hasCollapsedMutationRecord,
-  setDataCollapsed,
-} from "~/canvas/collapsed";
+import { setDataCollapsed } from "~/canvas/collapsed";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { $awareness } from "~/shared/awareness";
 
@@ -236,7 +233,7 @@ const subscribeSelectedInstance = (
 
   // Lightweight update
   const updateOutline: MutationCallback = (mutationRecords) => {
-    if (hasCollapsedMutationRecord(mutationRecords)) {
+    if (hasDoNotTrackMutationRecord(mutationRecords)) {
       return;
     }
 
@@ -250,10 +247,6 @@ const subscribeSelectedInstance = (
       return;
     }
 
-    if (hasCollapsedMutationRecord(mutationRecords)) {
-      return;
-    }
-
     update();
   };
 

apps/builder/app/shared/content-model.ts

@@ -424,7 +424,7 @@ export const richTextPlaceholders: Map<undefined | string, string> = new Map([
   ["blockquote", "Blockquote"],
   ["li", "List item"],
   ["a", "Link"],
-  ["span", "Span"],
+  ["span", ""],
 ]);
 
 const findContentTags = ({

apps/builder/app/shared/dom-utils.ts

@@ -219,6 +219,10 @@ export const getAllElementsBoundingBox = (
 
 const doNotTrackMutationAttribute = "data-ws-do-not-track-mutation";
 
+export const doNotTrackMutation = (element: Element) => {
+  element.setAttribute(doNotTrackMutationAttribute, "true");
+};
+
 export const hasDoNotTrackMutationAttribute = (element: Element) => {
   return element.hasAttribute(doNotTrackMutationAttribute);
 };
@@ -363,7 +367,10 @@ export const scrollIntoView = (anchor: HTMLElement, rect: DOMRect) => {
 
   requestAnimationFrame(() => {
     const savedPosition = (scrollParent as HTMLElement).style.position;
-    (scrollParent as HTMLElement).style.position = "relative";
+    // avoid updating <html> to prevent full page repaint and freeze on big projects
+    if (scrollParent.tagName !== "HTML") {
+      (scrollParent as HTMLElement).style.position = "relative";
+    }
 
     const matrix = getViewportToLocalMatrix(scrollParent);
 
@@ -387,6 +394,9 @@ export const scrollIntoView = (anchor: HTMLElement, rect: DOMRect) => {
 
     scrollParent.removeChild(scrollDiv);
 
-    (scrollParent as HTMLElement).style.position = savedPosition;
+    // avoid updating <html> to prevent full page repaint and freeze on big projects
+    if (scrollParent.tagName !== "HTML") {
+      (scrollParent as HTMLElement).style.position = savedPosition;
+    }
   });
 };

packages/sdk-components-react-radix/package.json

@@ -58,7 +58,6 @@
     "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.4",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@webstudio-is/css-engine": "workspace:*",
     "@webstudio-is/icons": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",

packages/sdk-components-react-radix/src/accordion.template.tsx

@@ -98,7 +98,7 @@ export const meta: TemplateMeta = {
     "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   order: 3,
   template: (
-    <radix.Accordion collapsible={true} defaultValue="0">
+    <radix.Accordion collapsible={true} value="0">
       {createAccordionItem(
         "Is it accessible?",
         "Yes. It adheres to the WAI-ARIA design pattern."

packages/sdk-components-react-radix/src/accordion.tsx

@@ -4,6 +4,8 @@ import {
   forwardRef,
   type ComponentProps,
   type RefAttributes,
+  useState,
+  useEffect,
 } from "react";
 import {
   Root,
@@ -21,8 +23,20 @@ export const Accordion = forwardRef<
     Extract<ComponentPropsWithoutRef<typeof Root>, { type: "single" }>,
     "type" | "asChild"
   >
->((props, ref) => {
-  return <Root ref={ref} type="single" {...props} />;
+>(({ defaultValue, ...props }, ref) => {
+  const currentValue = props.value ?? defaultValue ?? "";
+  const [value, setValue] = useState(currentValue);
+  // synchronize external value with local one when changed
+  useEffect(() => setValue(currentValue), [currentValue]);
+  return (
+    <Root
+      {...props}
+      ref={ref}
+      type="single"
+      value={value}
+      onValueChange={setValue}
+    />
+  );
 });
 
 export const AccordionItem = forwardRef<

packages/sdk-components-react-radix/src/checkbox.tsx

@@ -3,9 +3,10 @@ import {
   type ComponentPropsWithRef,
   forwardRef,
   type ComponentProps,
+  useState,
+  useEffect,
 } from "react";
 import { Root, Indicator } from "@radix-ui/react-checkbox";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
 
 export const Checkbox = forwardRef<
   HTMLButtonElement,
@@ -16,16 +17,16 @@ export const Checkbox = forwardRef<
     defaultChecked?: boolean;
   }
 >(({ defaultChecked, ...props }, ref) => {
-  const [checked, onCheckedChange] = useControllableState({
-    prop: props.checked ?? defaultChecked ?? false,
-    defaultProp: false,
-  });
+  const currentChecked = props.checked ?? defaultChecked ?? false;
+  const [checked, setChecked] = useState(currentChecked);
+  // synchronize external value with local one when changed
+  useEffect(() => setChecked(currentChecked), [currentChecked]);
   return (
     <Root
       {...props}
       ref={ref}
       checked={checked}
-      onCheckedChange={(open) => onCheckedChange(open === true)}
+      onCheckedChange={(open) => setChecked(open === true)}
     />
   );
 });

packages/sdk-components-react-radix/src/collapsible.tsx

@@ -5,14 +5,22 @@ import {
   Children,
   type ComponentProps,
   type RefAttributes,
+  useState,
+  useEffect,
 } from "react";
 import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
 import { type Hook, getClosestInstance } from "@webstudio-is/react-sdk/runtime";
 
-export const Collapsible: ForwardRefExoticComponent<
-  Omit<ComponentProps<typeof Root>, "defaultOpen" | "asChild"> &
-    RefAttributes<HTMLDivElement>
-> = Root;
+export const Collapsible = forwardRef<
+  HTMLDivElement,
+  Omit<ComponentProps<typeof Root>, "defaultOpen" | "asChild">
+>((props, ref) => {
+  const currentOpen = props.open ?? false;
+  const [open, setOpen] = useState(currentOpen);
+  // synchronize external value with local one when changed
+  useEffect(() => setOpen(currentOpen), [currentOpen]);
+  return <Root {...props} ref={ref} open={open} onOpenChange={setOpen} />;
+});
 
 /**
  * We're not exposing the 'asChild' property for the Trigger.

packages/sdk-components-react-radix/src/dialog.tsx

@@ -1,22 +1,21 @@
+import interactionResponse from "await-interaction-response";
 import {
-  type ComponentPropsWithoutRef,
   type ReactNode,
+  type ComponentProps,
   forwardRef,
   Children,
-  type ComponentProps,
   useEffect,
   useRef,
   useContext,
   useCallback,
+  useState,
 } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   ReactSdkContext,
   getClosestInstance,
   type Hook,
 } from "@webstudio-is/react-sdk/runtime";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import interactionResponse from "await-interaction-response";
 
 /**
  * Naive heuristic to determine if a click event will cause navigate
@@ -50,23 +49,19 @@ const willNavigate = (event: MouseEvent) => {
 // wrap in forwardRef because Root is functional component without ref
 export const Dialog = forwardRef<
   HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, "defaultOpen">
+  Omit<ComponentProps<typeof DialogPrimitive.Root>, "defaultOpen">
 >((props, _ref) => {
   const { renderer } = useContext(ReactSdkContext);
 
-  const [open, onOpenChange] = useControllableState({
-    prop: props.open,
-    defaultProp: false,
-    onChange: props.onOpenChange,
-  });
-
-  const onOpenChangeHandler = useCallback(
-    async (open: boolean) => {
-      await interactionResponse();
-      onOpenChange(open);
-    },
-    [onOpenChange]
-  );
+  const currentOpen = props.open ?? false;
+  const [open, setOpen] = useState(currentOpen);
+  // synchronize external value with local one when changed
+  useEffect(() => setOpen(currentOpen), [currentOpen]);
+
+  const onOpenChangeHandler = useCallback(async (open: boolean) => {
+    await interactionResponse();
+    setOpen(open);
+  }, []);
 
   /**
    * Close the dialog when a navigable link within it is clicked.
@@ -130,7 +125,7 @@ export const DialogTrigger = forwardRef<
 
 export const DialogOverlay = forwardRef<
   HTMLDivElement,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+  ComponentProps<typeof DialogPrimitive.Overlay>
 >((props, ref) => {
   return (
     <DialogPrimitive.DialogPortal>
@@ -141,7 +136,7 @@ export const DialogOverlay = forwardRef<
 
 export const DialogContent = forwardRef<
   HTMLDivElement,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  ComponentProps<typeof DialogPrimitive.Content>
 >((props, ref) => {
   const preventAutoFocusOnClose = useRef(false);
   const { renderer } = useContext(ReactSdkContext);

packages/sdk-components-react-radix/src/dialog.ws.ts

@@ -98,5 +98,6 @@ export const metaDialog: WsComponentMeta = {
     children: ["instance"],
     descendants: [radix.DialogTrigger, radix.DialogOverlay],
   },
+  initialProps: ["open"],
   props: propsDialog,
 };

packages/sdk-components-react-radix/src/popover.tsx

@@ -3,6 +3,8 @@ import {
   type ReactNode,
   forwardRef,
   Children,
+  useState,
+  useEffect,
 } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { getClosestInstance, type Hook } from "@webstudio-is/react-sdk/runtime";
@@ -12,7 +14,13 @@ export const Popover = forwardRef<
   HTMLDivElement,
   Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>, "defaultOpen">
 >((props, _ref) => {
-  return <PopoverPrimitive.Root {...props} />;
+  const currentOpen = props.open ?? false;
+  const [open, setOpen] = useState(currentOpen);
+  // synchronize external value with local one when changed
+  useEffect(() => setOpen(currentOpen), [currentOpen]);
+  return (
+    <PopoverPrimitive.Root {...props} open={open} onOpenChange={setOpen} />
+  );
 });
 
 /**