Merge branch 'main' into replace-overflow-hidden

Author: kof

.github/workflows/main.yml

@@ -133,9 +133,9 @@ jobs:
               }
             }
             const results = [
-              await assertSize('./fixtures/ssg/dist/client', 352),
+              await assertSize('./fixtures/ssg/dist/client', 356),
               await assertSize('./fixtures/react-router-netlify/build/client', 368),
-              await assertSize('./fixtures/webstudio-features/build/client', 1028),
+              await assertSize('./fixtures/webstudio-features/build/client', 1052),
             ]
             for (const result of results) {
               if (result.passed) {

README.md

@@ -21,7 +21,7 @@
 
 - [Twitter](https://twitter.com/getwebstudio)
 - [Youtube](https://www.youtube.com/@getwebstudio)
-- [Discord](https://discord.gg/UNdyrDkq5r)
+- [Discord](https://wstd.us/community)
 
 ## Thanks
 

apps/builder/app/builder/features/ai/ai-fetch-result.ts

@@ -4,6 +4,7 @@ import {
   operations,
   handleAiRequest,
   commandDetect,
+  WsEmbedTemplate,
 } from "@webstudio-is/ai";
 import { createRegularStyleSheet } from "@webstudio-is/css-engine";
 import {
@@ -13,7 +14,6 @@ import {
   componentAttribute,
 } from "@webstudio-is/react-sdk";
 import {
-  type WsEmbedTemplate,
   Instance,
   createScope,
   findTreeInstanceIds,

apps/builder/app/builder/features/ai/apply-operations.ts

@@ -1,18 +1,24 @@
 import { nanoid } from "nanoid";
-import { getStyleDeclKey, Instance, type StyleSource } from "@webstudio-is/sdk";
-import { generateDataFromEmbedTemplate } from "@webstudio-is/react-sdk";
+import {
+  getStyleDeclKey,
+  Instance,
+  isComponentDetachable,
+  type StyleSource,
+} from "@webstudio-is/sdk";
 import type { copywriter, operations } from "@webstudio-is/ai";
 import { serverSyncStore } from "~/shared/sync";
 import { isBaseBreakpoint } from "~/shared/breakpoints";
 import {
   deleteInstanceMutable,
+  findClosestInsertable,
   insertWebstudioFragmentAt,
   updateWebstudioData,
   type Insertable,
 } from "~/shared/instance-utils";
 import {
   $breakpoints,
   $instances,
+  $props,
   $registeredComponentMetas,
   $selectedInstanceSelector,
   $styleSourceSelections,
@@ -21,7 +27,8 @@ import {
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { $selectedInstance, getInstancePath } from "~/shared/awareness";
-import { isInstanceDetachable } from "~/shared/matcher";
+import { isRichTextTree } from "~/shared/content-model";
+import { generateDataFromEmbedTemplate } from "./embed-template";
 
 export const applyOperations = (operations: operations.WsOperations) => {
   for (const operation of operations) {
@@ -47,7 +54,7 @@ const insertTemplateByOp = (
   operation: operations.generateInsertTemplateWsOperation
 ) => {
   const metas = $registeredComponentMetas.get();
-  const templateData = generateDataFromEmbedTemplate(operation.template, metas);
+  const fragment = generateDataFromEmbedTemplate(operation.template, metas);
 
   // @todo Find a way to avoid the workaround below, peharps improving the prompt.
   // Occasionally the LLM picks a component name or the entire data-ws-id attribute as the insertion point.
@@ -63,26 +70,18 @@ const insertTemplateByOp = (
     }
   }
 
-  const rootInstanceIds = templateData.children
+  const rootInstanceIds = fragment.children
     .filter((child) => child.type === "id")
     .map((child) => child.value);
 
   const instanceSelector = computeSelectorForInstanceId(operation.addTo);
   if (instanceSelector) {
-    const currentInstance = $instances.get().get(instanceSelector[0]);
-    // Only container components are allowed to have child elements.
-    if (
-      currentInstance &&
-      metas.get(currentInstance.component)?.type !== "container"
-    ) {
-      return;
-    }
-
-    const dropTarget: Insertable = {
+    let insertable: Insertable = {
       parentSelector: instanceSelector,
       position: operation.addAtIndex + 1,
     };
-    insertWebstudioFragmentAt(templateData, dropTarget);
+    insertable = findClosestInsertable(fragment, insertable) ?? insertable;
+    insertWebstudioFragmentAt(fragment, insertable);
     return rootInstanceIds;
   }
 };
@@ -96,15 +95,10 @@ const deleteInstanceByOp = (
     if (instanceSelector.length === 1) {
       return;
     }
-    const metas = $registeredComponentMetas.get();
     updateWebstudioData((data) => {
-      if (
-        isInstanceDetachable({
-          metas,
-          instances: data.instances,
-          instanceSelector,
-        }) === false
-      ) {
+      const [instanceId] = instanceSelector;
+      const instance = data.instances.get(instanceId);
+      if (instance && !isComponentDetachable(instance.component)) {
         return;
       }
       deleteInstanceMutable(
@@ -214,39 +208,47 @@ const computeSelectorForInstanceId = (instanceId: Instance["id"]) => {
 };
 
 export const patchTextInstance = (textInstance: copywriter.TextInstance) => {
-  serverSyncStore.createTransaction([$instances], (instances) => {
-    const currentInstance = instances.get(textInstance.instanceId);
-
-    if (currentInstance === undefined) {
-      return;
-    }
-
-    const meta = $registeredComponentMetas.get().get(currentInstance.component);
+  serverSyncStore.createTransaction(
+    [$instances, $props],
+    (instances, props) => {
+      const currentInstance = instances.get(textInstance.instanceId);
 
-    // Only container components are allowed to have child elements.
-    if (meta?.type !== "container") {
-      return;
-    }
+      if (currentInstance === undefined) {
+        return;
+      }
 
-    if (currentInstance.children.length === 0) {
-      currentInstance.children = [{ type: "text", value: textInstance.text }];
-      return;
-    }
+      const canBeEdited = isRichTextTree({
+        instanceId: textInstance.instanceId,
+        instances,
+        props,
+        metas: $registeredComponentMetas.get(),
+      });
+      if (!canBeEdited) {
+        return;
+      }
 
-    // Instances can have a number of text child nodes without interleaving components.
-    // When this is the case we treat the child nodes as a single text node,
-    // otherwise the AI would generate children.length chunks of separate text.
-    // We can identify this case of "joint" text instances when the index is -1.
-    const replaceAll = textInstance.index === -1;
-    if (replaceAll) {
-      if (currentInstance.children.every((child) => child.type === "text")) {
+      if (currentInstance.children.length === 0) {
         currentInstance.children = [{ type: "text", value: textInstance.text }];
+        return;
       }
-      return;
-    }
 
-    if (currentInstance.children[textInstance.index].type === "text") {
-      currentInstance.children[textInstance.index].value = textInstance.text;
+      // Instances can have a number of text child nodes without interleaving components.
+      // When this is the case we treat the child nodes as a single text node,
+      // otherwise the AI would generate children.length chunks of separate text.
+      // We can identify this case of "joint" text instances when the index is -1.
+      const replaceAll = textInstance.index === -1;
+      if (replaceAll) {
+        if (currentInstance.children.every((child) => child.type === "text")) {
+          currentInstance.children = [
+            { type: "text", value: textInstance.text },
+          ];
+        }
+        return;
+      }
+
+      if (currentInstance.children[textInstance.index].type === "text") {
+        currentInstance.children[textInstance.index].value = textInstance.text;
+      }
     }
-  });
+  );
 };

…es/react-sdk/src/embed-template.test.tsx …lder/features/ai/embed-template.test.tsxpackages/react-sdk/src/embed-template.test.tsx renamed to apps/builder/app/builder/features/ai/embed-template.test.tsx packages/react-sdk/src/embed-template.test.tsx renamed to apps/builder/app/builder/features/ai/embed-template.test.tsx

@@ -1,6 +1,6 @@
 import { expect, test } from "vitest";
-import { generateDataFromEmbedTemplate, namespaceMeta } from "./embed-template";
-import { showAttribute } from "./props";
+import { showAttribute } from "@webstudio-is/react-sdk";
+import { generateDataFromEmbedTemplate } from "./embed-template";
 
 const expectString = expect.any(String);
 
@@ -664,31 +664,3 @@ test("generate data for embedding from instance child bound to variables", () =>
     resources: [],
   });
 });
-
-test("add namespace to constants and indexWithinAncestor", () => {
-  expect(
-    namespaceMeta(
-      {
-        type: "container",
-        label: "",
-        icon: "",
-        constraints: {
-          relation: "ancestor",
-          component: { $nin: ["Button", "Box"] },
-        },
-        indexWithinAncestor: "Tooltip",
-      },
-      "my-namespace",
-      new Set(["Tooltip", "Button"])
-    )
-  ).toEqual({
-    type: "container",
-    label: "",
-    icon: "",
-    constraints: {
-      relation: "ancestor",
-      component: { $nin: ["my-namespace:Button", "my-namespace:Box"] },
-    },
-    indexWithinAncestor: "my-namespace:Tooltip",
-  });
-});

packages/react-sdk/src/embed-template.ts …pp/builder/features/ai/embed-template.tspackages/react-sdk/src/embed-template.ts renamed to apps/builder/app/builder/features/ai/embed-template.ts packages/react-sdk/src/embed-template.ts renamed to apps/builder/app/builder/features/ai/embed-template.ts

@@ -8,16 +8,13 @@ import type {
   Breakpoint,
   DataSource,
   WebstudioFragment,
-  Matcher,
-  EmbedTemplateVariable,
-  WsEmbedTemplate,
-  EmbedTemplateInstance,
   WsComponentMeta,
 } from "@webstudio-is/sdk";
 import {
   encodeDataSourceVariable,
   transpileExpression,
 } from "@webstudio-is/sdk";
+import type { EmbedTemplateVariable, WsEmbedTemplate } from "@webstudio-is/ai";
 
 const getVariablValue = (
   value: EmbedTemplateVariable["initialValue"]
@@ -275,47 +272,3 @@ export const generateDataFromEmbedTemplate = (
     resources: [],
   };
 };
-
-const namespaceMatcher = (namespace: string, matcher: Matcher) => {
-  const newMatcher = structuredClone(matcher);
-  if (newMatcher.component?.$eq) {
-    newMatcher.component.$eq = `${namespace}:${newMatcher.component.$eq}`;
-  }
-  if (newMatcher.component?.$neq) {
-    newMatcher.component.$neq = `${namespace}:${newMatcher.component.$neq}`;
-  }
-  if (newMatcher.component?.$in) {
-    newMatcher.component.$in = newMatcher.component.$in.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  if (newMatcher.component?.$nin) {
-    newMatcher.component.$nin = newMatcher.component.$nin.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  return newMatcher;
-};
-
-export const namespaceMeta = (
-  meta: WsComponentMeta,
-  namespace: string,
-  components: Set<EmbedTemplateInstance["component"]>
-) => {
-  const newMeta = { ...meta };
-  if (newMeta.constraints) {
-    if (Array.isArray(newMeta.constraints)) {
-      newMeta.constraints = newMeta.constraints.map((matcher) =>
-        namespaceMatcher(namespace, matcher)
-      );
-    } else {
-      newMeta.constraints = namespaceMatcher(namespace, newMeta.constraints);
-    }
-  }
-  if (newMeta.indexWithinAncestor) {
-    newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor)
-      ? `${namespace}:${newMeta.indexWithinAncestor}`
-      : newMeta.indexWithinAncestor;
-  }
-  return newMeta;
-};

apps/builder/app/builder/features/blocking-alerts/alert.tsx

@@ -1,5 +1,8 @@
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
 import type { ReactNode } from "react";
 import {
+  Button,
   css,
   Flex,
   Popover,
@@ -23,7 +26,19 @@ const contentStyle = css({
   color: theme.colors.foregroundDestructive,
 });
 
-export const Alert = ({ message }: { message: string | ReactNode }) => {
+const $isAlertDismissed = atom(false);
+
+export const Alert = ({
+  message,
+  isDismissable,
+}: {
+  message: string | ReactNode;
+  isDismissable?: boolean;
+}) => {
+  const isAlertDismissed = useStore($isAlertDismissed);
+  if (isAlertDismissed) {
+    return;
+  }
   return (
     <Popover open>
       <PopoverContent css={{ zIndex: theme.zIndices.max }}>
@@ -38,6 +53,14 @@ export const Alert = ({ message }: { message: string | ReactNode }) => {
             <Text color="contrast" align="center">
               {message}
             </Text>
+            {isDismissable && (
+              <Button
+                color="destructive"
+                onClick={() => $isAlertDismissed.set(true)}
+              >
+                Dismiss
+              </Button>
+            )}
           </Flex>
         </Flex>
       </PopoverContent>

apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx

@@ -93,8 +93,9 @@ export const BlockingAlerts = () => {
   const isPreviewMode = useStore($isPreviewMode);
   const loadingState = useStore($loadingState);
 
+  const unsupportedBrowsersMessage = useUnsupportedBrowser();
   // Takes the latest message, order matters
-  const message = [useTooSmallMessage(), useUnsupportedBrowser()]
+  const message = [useTooSmallMessage(), unsupportedBrowsersMessage]
     .filter(Boolean)
     .pop();
 
@@ -107,5 +108,10 @@ export const BlockingAlerts = () => {
     return;
   }
 
-  return <Alert message={message} />;
+  return (
+    <Alert
+      message={message}
+      isDismissable={unsupportedBrowsersMessage !== undefined}
+    />
+  );
 };

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

@@ -81,7 +81,7 @@ export const CommandPanel: StoryFn = () => {
       <button onClick={openCommandPanel}>Open command panel</button>
       <br />
       <input
-        defaultValue="Press cmd+k to open command panel"
+        defaultValue="Press meta+k to open command panel"
         style={{ width: 300 }}
       />
       <CommandPanelComponent />