Merge branch 'main' into fix-wf-paste

Author: kof

apps/builder/app/builder/builder.tsx

@@ -32,7 +32,6 @@ import {
 } from "~/shared/nano-states";
 import { $settings, type Settings } from "./shared/client-settings";
 import { builderUrl, getCanvasUrl } from "~/shared/router-utils";
-import { useCopyPaste } from "~/shared/copy-paste";
 import { BlockingAlerts } from "./features/blocking-alerts";
 import { useSyncPageUrl } from "~/shared/pages";
 import { useMount, useUnmount } from "~/shared/hook-utils/use-mount";
@@ -58,6 +57,7 @@ import { updateWebstudioData } from "~/shared/instance-utils";
 import { migrateWebstudioDataMutable } from "~/shared/webstudio-data-migrator";
 import { Loading, LoadingBackground } from "./shared/loading";
 import { mergeRefs } from "@react-aria/utils";
+import { initCopyPaste } from "~/shared/copy-paste";
 
 registerContainers();
 
@@ -285,9 +285,7 @@ export const Builder = ({
   const isCloneDialogOpen = useStore($isCloneDialogOpen);
   const isPreviewMode = useStore($isPreviewMode);
   const { onRef: onRefReadCanvas, onTransitionEnd } = useReadCanvasRect();
-  // We need to initialize this in both canvas and builder,
-  // because the events will fire in either one, depending on where the focus is
-  useCopyPaste();
+
   useSetWindowTitle();
 
   const iframeRefCallback = mergeRefs((element: HTMLIFrameElement | null) => {
@@ -299,14 +297,24 @@ export const Builder = ({
   const [loadingState, setLoadingState] = useState(() => $loadingState.get());
 
   useEffect(() => {
+    const abortController = new AbortController();
+    // We need to initialize this in both canvas and builder,
+    // because the events will fire in either one, depending on where the focus is
+    // @todo we need to forward the events from canvas to builder and avoid importing this
+    // in both places
+    initCopyPaste(abortController);
+
     const unsubscribe = $loadingState.subscribe((loadingState) => {
       setLoadingState(loadingState);
       // We need to stop updating it once it's ready in case in the future it changes again.
       if (loadingState.state === "ready") {
         unsubscribe();
       }
     });
-    return unsubscribe;
+    return () => {
+      unsubscribe();
+      abortController.abort();
+    };
   }, []);
 
   const canvasUrl = getCanvasUrl();

apps/builder/app/builder/features/inspector/inspector.tsx

@@ -102,12 +102,17 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
   const meta = metas.get(selectedInstance.component);
   const documentType = selectedPage?.meta.documentType ?? "html";
 
-  const availablePanels = {
-    style: documentType === "html" && (meta?.stylable ?? true),
-    // @todo hide root component settings until
-    // global data sources are implemented
-    settings: selectedInstance.component !== rootComponent,
-  };
+  type PanelName = "style" | "settings";
+
+  const availablePanels = new Set<PanelName>();
+  if (documentType === "html" && (meta?.stylable ?? true)) {
+    availablePanels.add("style");
+  }
+  // @todo hide root component settings until
+  // global data sources are implemented
+  if (selectedInstance.component !== rootComponent) {
+    availablePanels.add("settings");
+  }
 
   return (
     <EnhancedTooltipProvider
@@ -120,18 +125,18 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
           <PanelTabs
             ref={tabsRef}
             value={
-              availablePanels[activeInspectorPanel]
+              availablePanels.has(activeInspectorPanel)
                 ? activeInspectorPanel
-                : Object.keys(availablePanels)[0]
+                : Array.from(availablePanels)[0]
             }
             onValueChange={(panel) => {
-              $activeInspectorPanel.set(panel as keyof typeof availablePanels);
+              $activeInspectorPanel.set(panel as PanelName);
             }}
             asChild
           >
             <Flex direction="column">
               <PanelTabsList>
-                {availablePanels.style && (
+                {availablePanels.has("style") && (
                   <Tooltip
                     variant="wrapped"
                     content={
@@ -146,7 +151,7 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
                     </div>
                   </Tooltip>
                 )}
-                {availablePanels.settings && (
+                {availablePanels.has("settings") && (
                   <Tooltip
                     variant="wrapped"
                     content={

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

@@ -181,11 +181,8 @@ export const PropsSection = (props: PropsSectionProps) => {
               }}
             />
           )}
-          {logic.addedProps.map((item, index) =>
-            renderProperty(props, item, {
-              deletable: true,
-              autoFocus: index === 0,
-            })
+          {logic.addedProps.map((item) =>
+            renderProperty(props, item, { deletable: true })
           )}
           {logic.initialProps.map((item) => renderProperty(props, item))}
         </Flex>

apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx

@@ -1,132 +1,81 @@
-import { Select } from "@webstudio-is/design-system";
-import { type FontWeight, fontWeights } from "@webstudio-is/fonts";
+import { Select, Text } from "@webstudio-is/design-system";
+import {
+  type FontWeight,
+  fontWeightNames,
+  fontWeights,
+} from "@webstudio-is/fonts";
 import { toValue } from "@webstudio-is/css-engine";
-import { useMemo } from "react";
-import { useAssets } from "~/builder/shared/assets";
-import { isSupportedFontWeight } from "./is-supported-font-weight";
+import { useEffect } from "react";
 import { useComputedStyles } from "../../shared/model";
 import { setProperty } from "../../shared/use-style-data";
+import { canvasApi } from "~/shared/canvas-api";
+import { useStore } from "@nanostores/react";
+import { $detectedFontsWeights } from "~/shared/nano-states";
 
-type FontWeightItem = {
-  label: string;
-  weight: FontWeight;
-};
-
-const allFontWeights: Array<FontWeightItem> = (
-  Object.keys(fontWeights) as Array<FontWeight>
-).map((weight) => ({
-  label: `${weight} - ${fontWeights[weight].label}`,
-  weight,
-}));
-
-// All font weights for the current family
-const useAvailableFontWeights = (
-  currentFamily: string
-): Array<FontWeightItem> => {
-  const { assetContainers } = useAssets("font");
-
-  // Find all font weights that are available for the current font family.
-  return useMemo(() => {
-    const found = allFontWeights.filter((option) => {
-      return assetContainers.find((assetContainer) => {
-        if (
-          assetContainer.status !== "uploaded" ||
-          assetContainer.asset.type !== "font"
-        ) {
-          return false;
-        }
-        return isSupportedFontWeight(
-          assetContainer.asset,
-          option.weight,
-          currentFamily
-        );
-      });
-    });
-    return found.length === 0 ? allFontWeights : found;
-  }, [currentFamily, assetContainers]);
-};
-
-const useLabels = (
-  availableFontWeights: Array<FontWeightItem>,
-  currentWeight: string
-) => {
-  // support named aliases
-  if (currentWeight === "normal") {
-    currentWeight = "400";
-  }
-  if (currentWeight === "bold") {
-    currentWeight = "700";
-  }
-  const labels = useMemo(
-    () => availableFontWeights.map((option) => option.label),
-    [availableFontWeights]
-  );
-
-  const selectedLabel = useMemo(() => {
-    const selectedOption =
-      availableFontWeights.find((option) => option.weight === currentWeight) ??
-      // In case available weights a custom font supports does not include the current weight,
-      // we show the first available weight.
-      availableFontWeights[0];
-    return selectedOption?.label;
-  }, [currentWeight, availableFontWeights]);
+const allFontWeights = Object.keys(fontWeights) as Array<FontWeight>;
 
-  return { labels, selectedLabel };
-};
+const labels = new Map(
+  allFontWeights.map((weight) => [
+    weight,
+    `${weight} - ${fontWeights[weight as FontWeight].label}`,
+  ])
+);
 
 export const FontWeightControl = () => {
   // We need the font family to determine which font weights are available
   const [fontWeight, fontFamily] = useComputedStyles([
     "fontWeight",
     "fontFamily",
   ]);
+  const detectedFontsWeights = useStore($detectedFontsWeights);
+  const fontFamilyCss = toValue(fontFamily.usedValue);
+  const fontWeightCss = toValue(fontWeight.cascadedValue);
+  const supportedFontWeights = detectedFontsWeights.get(fontFamilyCss) ?? [];
 
-  const availableFontWeights = useAvailableFontWeights(
-    toValue(fontFamily.cascadedValue, (styleValue) => {
-      // override default fallback with rendering only first font family
-      if (styleValue.type === "fontFamily") {
-        return {
-          type: "fontFamily",
-          value: [styleValue.value[0]],
-        };
-      }
-    })
-  );
-  const { labels, selectedLabel } = useLabels(
-    availableFontWeights,
-    toValue(fontWeight.cascadedValue)
-  );
+  useEffect(() => {
+    canvasApi.detectSupportedFontWeights(fontFamilyCss);
+  }, [fontFamilyCss]);
+
+  const selectedWeight =
+    fontWeightNames.get(fontWeightCss) ?? (fontWeightCss as FontWeight);
 
   const setValue = setProperty("fontWeight");
 
-  const setFontWeight = (label: string, options?: { isEphemeral: boolean }) => {
-    const selected = availableFontWeights.find(
-      (option) => option.label === label
-    );
-    if (selected) {
-      setValue({ type: "keyword", value: selected.weight }, options);
-    }
+  const setFontWeight = (
+    nextWeight: FontWeight,
+    options?: { isEphemeral: boolean }
+  ) => {
+    setValue({ type: "keyword", value: nextWeight }, options);
   };
 
   return (
     <Select
       // show empty field instead of radix placeholder
       // like css value input does
       placeholder=""
-      options={labels}
+      options={allFontWeights}
+      getLabel={(weight: FontWeight) => {
+        return (
+          <Text
+            color={supportedFontWeights.includes(weight) ? "main" : "subtle"}
+          >
+            {labels.get(weight)}
+          </Text>
+        );
+      }}
       // We use a weight as a value, because there are only 9 weights and they are unique.
-      value={selectedLabel}
+      value={selectedWeight}
       onChange={setFontWeight}
-      onItemHighlight={(label) => {
+      onItemHighlight={(nextWeight) => {
         // Remove preview when mouse leaves the item.
-        if (label === undefined) {
+        if (nextWeight === undefined) {
           if (fontWeight !== undefined) {
             setValue(fontWeight.cascadedValue, { isEphemeral: true });
           }
           return;
         }
         // Preview on mouse enter or focus.
-        setFontWeight(label, { isEphemeral: true });
+        setFontWeight(nextWeight, { isEphemeral: true });
       }}
       onOpenChange={(isOpen) => {
         // Remove ephemeral changes when closing the menu.

apps/builder/app/builder/features/style-panel/controls/font-weight/is-supported-font-weight.test.ts

@@ -256,7 +256,7 @@ const AdvancedPropertyValue = ({
           styleValue.value.startsWith("--")
         ) {
           setProperty(property)(
-            { type: "var", value: styleValue.value.slice(2), fallbacks: [] },
+            { type: "var", value: styleValue.value.slice(2) },
             { ...options, listed: true }
           );
         } else {

apps/builder/app/builder/features/style-panel/controls/font-weight/is-supported-font-weight.ts

@@ -20,13 +20,6 @@ export const parseIntermediateOrInvalidValue = (
     value = value.slice(0, -1);
   }
 
-  if (property.startsWith("--")) {
-    return {
-      type: "unparsed",
-      value,
-    };
-  }
-
   // When user enters a number, we don't know if its a valid unit value,
   // so we are going to parse it with a unit and if its not invalid - we take it.
   const ast = parse(value, { context: "value" });