From 850f65faec16d06c3124091df8106aec50eca0a5 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 14 Sep 2022 10:28:27 +0200
Subject: [PATCH 01/24] wip upload single font file

---
 packages/asset-uploader/src/db/create.ts      | 26 ++++++++++++++--
 .../asset-uploader/src/targets/fs/upload.ts   |  7 +++--
 packages/asset-uploader/src/types.ts          |  8 ++---
 .../asset-uploader/src/utils/format-asset.ts  | 20 +++++++------
 .../src/utils/get-asset-data.ts               | 30 ++++++++++++++-----
 5 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/packages/asset-uploader/src/db/create.ts b/packages/asset-uploader/src/db/create.ts
index 9eff5759aa..51e1780ce2 100644
--- a/packages/asset-uploader/src/db/create.ts
+++ b/packages/asset-uploader/src/db/create.ts
@@ -6,23 +6,45 @@ import {
 import { type Metadata } from "sharp";
 import { formatAsset } from "../utils/format-asset";
 
-type Options = {
+type BaseOptions = {
   name: string;
   size: number;
   metadata: Metadata;
   location: Location;
 };
 
+type Options =
+  | ({
+      type: "image";
+    } & BaseOptions)
+  | ({ type: "font" } & BaseOptions);
+
 const create = (projectId: Project["id"], options: Options) => {
   const size = options.size || options.metadata.size || 0;
   const { metadata, name, location } = options;
+
+  if (options.type === "image") {
+    return prisma.asset.create({
+      data: {
+        location,
+        name,
+        size,
+        format: metadata.format,
+        meta: JSON.stringify({
+          width: metadata.width,
+          height: metadata.height,
+        }),
+        projectId,
+      },
+    });
+  }
+
   return prisma.asset.create({
     data: {
       location,
       name,
       size,
       format: metadata.format,
-      meta: JSON.stringify({ width: metadata.width, height: metadata.height }),
       projectId,
     },
   });
diff --git a/packages/asset-uploader/src/targets/fs/upload.ts b/packages/asset-uploader/src/targets/fs/upload.ts
index 9ee88ab8ca..46d22d136f 100644
--- a/packages/asset-uploader/src/targets/fs/upload.ts
+++ b/packages/asset-uploader/src/targets/fs/upload.ts
@@ -33,11 +33,12 @@ export const uploadToFs = async ({
     uploadHandler
   );
   const formDataImages = AssetsFromFs.parse(formData.getAll("image"));
+  const formDataFonts = AssetsFromFs.parse(formData.getAll("font"));
+  const formDataAll = [...formDataImages, ...formDataFonts];
 
-  // @todo fonts
-  const assets = formDataImages.map(async (asset) =>
+  const assets = formDataAll.map(async (asset) =>
     getAssetData({
-      type: "image" as const,
+      type: formDataFonts.includes(asset) ? "font" : "image",
       name: asset.name,
       size: asset.size,
       buffer: (await asset.arrayBuffer()) as Uint8Array,
diff --git a/packages/asset-uploader/src/types.ts b/packages/asset-uploader/src/types.ts
index 5928b82cde..92b1146fb3 100644
--- a/packages/asset-uploader/src/types.ts
+++ b/packages/asset-uploader/src/types.ts
@@ -1,12 +1,8 @@
 import { Asset as DbAsset } from "@webstudio-is/prisma-client";
-
-type ImageMeta = {
-  width?: number;
-  height?: number;
-};
+import type { FontMeta, ImageMeta } from "./utils/format-asset";
 
 export type Asset = Omit<DbAsset, "meta"> & {
   path?: string;
   status?: "uploading" | "uploaded";
-  meta: ImageMeta;
+  meta: ImageMeta | FontMeta;
 };
diff --git a/packages/asset-uploader/src/utils/format-asset.ts b/packages/asset-uploader/src/utils/format-asset.ts
index 310c41cfad..7b5b07cf21 100644
--- a/packages/asset-uploader/src/utils/format-asset.ts
+++ b/packages/asset-uploader/src/utils/format-asset.ts
@@ -3,22 +3,24 @@ import { Asset as DbAsset } from "@webstudio-is/prisma-client";
 import { Asset } from "../types";
 import { getAssetPath } from "./get-asset-path";
 
-// @todo to use to distinguish between images and fonts
-//const formatTypeMap = {
-//  woff: "font",
-//  woff2: "font",
-//  ttf: "font",
-//  otf: "font",
-//  eot: "font",
-//} as const;
+const fontExtensions = ["ttf", "otf", "woff", "woff2", "eot"];
 
 const ImageMeta = z.object({
   width: z.number().optional(),
   height: z.number().optional(),
 });
+export type ImageMeta = z.infer<typeof ImageMeta>;
+
+// @todo fonts meta
+const FontMeta = z.object({});
+export type FontMeta = z.infer<typeof FontMeta>;
 
 export const formatAsset = (asset: DbAsset): Asset => {
-  const meta = ImageMeta.parse(JSON.parse(asset.meta));
+  const Schema =
+    asset.format && fontExtensions.includes(asset.format)
+      ? FontMeta
+      : ImageMeta;
+  const meta = Schema.parse(JSON.parse(asset.meta));
   return {
     ...asset,
     meta,
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index 5f89db037c..49c012f58e 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -1,25 +1,38 @@
 import { Location } from "@webstudio-is/prisma-client";
 import sharp, { type Metadata } from "sharp";
 
-//type FontData = any;
-
-type ImageData = {
+type BaseData = {
   name: string;
   size: number;
-  metadata: Metadata;
   location: Location;
 };
 
-export type AssetData = ImageData; // | FontData;
+type ImageData = BaseData & {
+  type: "image";
+  metadata: Metadata;
+};
 
-type AssetOptions = {
-  type: "image" | "font";
+type FontData = BaseData & {
+  type: "font";
+  // @todo fonts meta
+  metadata: {};
+};
+
+export type AssetData = ImageData | FontData;
+
+type BaseAssetOptions = {
   name: string;
   size: number;
   buffer: Buffer | Uint8Array;
   location: Location;
 };
 
+type AssetOptions =
+  | ({
+      type: "image";
+    } & BaseAssetOptions)
+  | ({ type: "font" } & BaseAssetOptions);
+
 export const getAssetData = async (
   options: AssetOptions
 ): Promise<AssetData> => {
@@ -27,6 +40,8 @@ export const getAssetData = async (
   if (options.type === "image") {
     const sharpImage = sharp(options.buffer);
     metadata = await sharpImage.metadata();
+  } else {
+    metadata = {};
   }
 
   if (metadata === undefined) {
@@ -35,6 +50,7 @@ export const getAssetData = async (
 
   // @todo fonts
   return {
+    type: options.type,
     name: options.name,
     size: options.size,
     location: options.location,

From d0688d62f870f909ab219154ab4f6faf7f81258f Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 14 Sep 2022 13:56:56 +0200
Subject: [PATCH 02/24] types

---
 .../panels/asset-manager/asset-info.tsx       | 30 ++++++++++---------
 .../src/utils/get-asset-data.ts               | 23 +++++---------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
index 94ce843b40..659179607c 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
@@ -81,20 +81,22 @@ export const AssetInfo = ({
           </Flex>
         </Grid>
       </Box>
-      <Box css={{ p: "$2 $3" }}>
-        <Grid columns={2} gap={2} align="center">
-          <Flex align="center" css={{ gap: "$1" }}>
-            <SizeIcon />
-            <Text variant="label">
-              {meta.width} x {meta.height}
-            </Text>
-          </Flex>{" "}
-          <Flex align="center" css={{ gap: "$1" }}>
-            <AspectRatioIcon />
-            <Text variant="label">{getFormattedAspectRatio(meta)}</Text>
-          </Flex>
-        </Grid>
-      </Box>
+      {"width" in meta && "height" in meta ? (
+        <Box css={{ p: "$2 $3" }}>
+          <Grid columns={2} gap={2} align="center">
+            <Flex align="center" css={{ gap: "$1" }}>
+              <SizeIcon />
+              <Text variant="label">
+                {meta.width} x {meta.height}
+              </Text>
+            </Flex>{" "}
+            <Flex align="center" css={{ gap: "$1" }}>
+              <AspectRatioIcon />
+              <Text variant="label">{getFormattedAspectRatio(meta)}</Text>
+            </Flex>
+          </Grid>
+        </Box>
+      ) : null}
       <Box css={{ p: "$2 $3" }}>
         <Button variant="red" size="2" onClick={handleDeleteAsset}>
           <Flex align="center" css={{ gap: "$1" }}>
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index 49c012f58e..1d206fc611 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -36,24 +36,15 @@ type AssetOptions =
 export const getAssetData = async (
   options: AssetOptions
 ): Promise<AssetData> => {
-  let metadata;
-  if (options.type === "image") {
-    const sharpImage = sharp(options.buffer);
-    metadata = await sharpImage.metadata();
-  } else {
-    metadata = {};
-  }
-
-  if (metadata === undefined) {
-    throw new Error("Could not get metadata for asset");
-  }
-
-  // @todo fonts
-  return {
-    type: options.type,
+  const baseData = {
     name: options.name,
     size: options.size,
     location: options.location,
-    metadata,
   };
+  if (options.type === "image") {
+    const sharpImage = sharp(options.buffer);
+    const metadata = await sharpImage.metadata();
+    return { ...baseData, type: "image", metadata };
+  }
+  return { ...baseData, type: "font", metadata: {} };
 };

From c69a74cc9101b14b53cef10c2ed2f50be0f62f01 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 14 Sep 2022 17:35:16 +0200
Subject: [PATCH 03/24] fixing types

---
 .../designer/shared/assets/asset-upload.tsx   |  3 +-
 packages/asset-uploader/src/db/create.ts      | 45 ++++++++-----------
 .../asset-uploader/src/targets/s3/upload.ts   | 28 ++++++++++--
 packages/asset-uploader/src/types.ts          |  2 +
 .../src/utils/get-asset-data.ts               | 19 +++++---
 5 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/apps/designer/app/designer/shared/assets/asset-upload.tsx b/apps/designer/app/designer/shared/assets/asset-upload.tsx
index 5e5fc55923..3e27ca3bc9 100644
--- a/apps/designer/app/designer/shared/assets/asset-upload.tsx
+++ b/apps/designer/app/designer/shared/assets/asset-upload.tsx
@@ -3,6 +3,7 @@ import ObjectID from "bson-objectid";
 import { ChangeEvent, useRef } from "react";
 import { Button, Flex, Text } from "@webstudio-is/design-system";
 import { UploadIcon } from "@webstudio-is/icons";
+import type { AssetType } from "@webstudio-is/asset-uploader";
 import type { BaseAsset } from "./types";
 
 const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
@@ -37,7 +38,7 @@ const acceptMap = {
 
 type AssetUploadProps = {
   onSubmit: (assets: Array<BaseAsset>) => void;
-  type: "image" | "font";
+  type: AssetType;
 };
 
 export const AssetUpload = ({ onSubmit, type }: AssetUploadProps) => {
diff --git a/packages/asset-uploader/src/db/create.ts b/packages/asset-uploader/src/db/create.ts
index 51e1780ce2..a54c481be9 100644
--- a/packages/asset-uploader/src/db/create.ts
+++ b/packages/asset-uploader/src/db/create.ts
@@ -3,49 +3,42 @@ import {
   type Location,
   type Project,
 } from "@webstudio-is/prisma-client";
-import { type Metadata } from "sharp";
-import { formatAsset } from "../utils/format-asset";
+import {
+  formatAsset,
+  type FontMeta,
+  type ImageMeta,
+} from "../utils/format-asset";
 
 type BaseOptions = {
   name: string;
   size: number;
-  metadata: Metadata;
   location: Location;
+  format?: string;
 };
 
 type Options =
   | ({
       type: "image";
+      meta: ImageMeta;
     } & BaseOptions)
-  | ({ type: "font" } & BaseOptions);
+  | ({ type: "font"; meta: FontMeta } & BaseOptions);
 
 const create = (projectId: Project["id"], options: Options) => {
-  const size = options.size || options.metadata.size || 0;
-  const { metadata, name, location } = options;
+  const size = options.size || 0;
+  const { meta, format, name, location } = options;
 
-  if (options.type === "image") {
-    return prisma.asset.create({
-      data: {
-        location,
-        name,
-        size,
-        format: metadata.format,
-        meta: JSON.stringify({
-          width: metadata.width,
-          height: metadata.height,
-        }),
-        projectId,
-      },
-    });
-  }
+  const baseData = {
+    location,
+    name,
+    size,
+    format,
+    projectId,
+  };
 
   return prisma.asset.create({
     data: {
-      location,
-      name,
-      size,
-      format: metadata.format,
-      projectId,
+      ...baseData,
+      meta: JSON.stringify(meta),
     },
   });
 };
diff --git a/packages/asset-uploader/src/targets/s3/upload.ts b/packages/asset-uploader/src/targets/s3/upload.ts
index 0c084df44a..476f784170 100644
--- a/packages/asset-uploader/src/targets/s3/upload.ts
+++ b/packages/asset-uploader/src/targets/s3/upload.ts
@@ -10,7 +10,7 @@ import { S3EnvVariables } from "../../schema";
 import { toBuffer } from "../../utils/to-buffer";
 import { getAssetData } from "../../utils/get-asset-data";
 import { createMany } from "../../db";
-import { Asset } from "../../types";
+import type { Asset } from "../../types";
 import { getUniqueFilename } from "../../utils/get-unique-filename";
 import { getS3Client } from "./client";
 
@@ -36,6 +36,7 @@ export const uploadToS3 = async ({
       })
   );
 
+  // @todo fonts
   const imagesFormData = formData.getAll("image") as Array<string>;
   const assetsData = imagesFormData.map((dataString) => {
     // @todo validate with zod
@@ -88,14 +89,33 @@ const uploadHandler = async ({
 
   AssetsUploadedSuccess.parse(await upload.done());
 
-  // @todo fonts
-  const assetOptions = {
-    type: "image" as const,
+  const type = file.contentType.startsWith("image")
+    ? ("image" as const)
+    : ("font" as const);
+
+  const baseAssetOptions = {
     name: uniqueFilename,
     size: buffer.byteLength,
     buffer,
     location: Location.REMOTE,
   };
+  let assetOptions;
+
+  if (type === "image") {
+    assetOptions = {
+      type,
+      ...baseAssetOptions,
+    };
+  } else if (type === "font") {
+    assetOptions = {
+      type,
+      ...baseAssetOptions,
+    };
+  }
+
+  if (assetOptions === undefined) {
+    throw new Error("Asset type not supported");
+  }
 
   const assetData = await getAssetData(assetOptions);
 
diff --git a/packages/asset-uploader/src/types.ts b/packages/asset-uploader/src/types.ts
index 92b1146fb3..0fceb9d21e 100644
--- a/packages/asset-uploader/src/types.ts
+++ b/packages/asset-uploader/src/types.ts
@@ -6,3 +6,5 @@ export type Asset = Omit<DbAsset, "meta"> & {
   status?: "uploading" | "uploaded";
   meta: ImageMeta | FontMeta;
 };
+
+export type AssetType = "image" | "font";
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index 1d206fc611..944b94a5bd 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -1,21 +1,23 @@
 import { Location } from "@webstudio-is/prisma-client";
-import sharp, { type Metadata } from "sharp";
+import sharp from "sharp";
+import type { FontMeta, ImageMeta } from "./format-asset";
 
 type BaseData = {
   name: string;
   size: number;
   location: Location;
+  format?: string;
 };
 
 type ImageData = BaseData & {
   type: "image";
-  metadata: Metadata;
+  meta: ImageMeta;
 };
 
 type FontData = BaseData & {
   type: "font";
   // @todo fonts meta
-  metadata: {};
+  meta: FontMeta;
 };
 
 export type AssetData = ImageData | FontData;
@@ -43,8 +45,13 @@ export const getAssetData = async (
   };
   if (options.type === "image") {
     const sharpImage = sharp(options.buffer);
-    const metadata = await sharpImage.metadata();
-    return { ...baseData, type: "image", metadata };
+    const { width, height, format } = await sharpImage.metadata();
+    return {
+      ...baseData,
+      type: options.type,
+      format,
+      meta: { width, height },
+    };
   }
-  return { ...baseData, type: "font", metadata: {} };
+  return { type: options.type, ...baseData, meta: {} };
 };

From 492f5b625e2f120ed9a46b910a54ff0b7e7c3442 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 14 Sep 2022 17:40:57 +0200
Subject: [PATCH 04/24] enable font family selector from assets when assets
 feature is enabled

---
 .../app/designer/features/style-panel/shared/configs.ts    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/shared/configs.ts b/apps/designer/app/designer/features/style-panel/shared/configs.ts
index cbdf44a614..7364b1717f 100644
--- a/apps/designer/app/designer/features/style-panel/shared/configs.ts
+++ b/apps/designer/app/designer/features/style-panel/shared/configs.ts
@@ -38,6 +38,7 @@ import {
   RowGapIcon,
   ColumnGapIcon,
 } from "@webstudio-is/icons";
+import { isFeatureEnabled } from "~/shared/feature-flags";
 
 type BaseStyleConfig = {
   label: string;
@@ -90,9 +91,9 @@ const getControl = (property: StyleProperty): Control => {
     case "placeContent": {
       return "Empty";
     }
-    //case "fontFamily": {
-    //  return "FontFamily";
-    //}
+    case "fontFamily": {
+      return isFeatureEnabled("assets") ? "FontFamily" : "Text";
+    }
   }
 
   return "Text";

From 34b73b555a2f658be04af573a1dc812b8db4bbab Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 15 Sep 2022 09:48:44 +0200
Subject: [PATCH 05/24] make format non-optional

---
 packages/asset-uploader/src/db/create.ts             |  2 +-
 packages/asset-uploader/src/utils/format-asset.ts    |  5 +----
 packages/asset-uploader/src/utils/get-asset-data.ts  |  8 ++++++--
 .../asset-uploader/src/utils/get-asset-path.test.ts  | 12 ++++++------
 packages/prisma-client/prisma/schema.prisma          |  2 +-
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/asset-uploader/src/db/create.ts b/packages/asset-uploader/src/db/create.ts
index a54c481be9..e1480b8bb9 100644
--- a/packages/asset-uploader/src/db/create.ts
+++ b/packages/asset-uploader/src/db/create.ts
@@ -13,7 +13,7 @@ type BaseOptions = {
   name: string;
   size: number;
   location: Location;
-  format?: string;
+  format: string;
 };
 
 type Options =
diff --git a/packages/asset-uploader/src/utils/format-asset.ts b/packages/asset-uploader/src/utils/format-asset.ts
index 7b5b07cf21..f333c2f3f0 100644
--- a/packages/asset-uploader/src/utils/format-asset.ts
+++ b/packages/asset-uploader/src/utils/format-asset.ts
@@ -16,10 +16,7 @@ const FontMeta = z.object({});
 export type FontMeta = z.infer<typeof FontMeta>;
 
 export const formatAsset = (asset: DbAsset): Asset => {
-  const Schema =
-    asset.format && fontExtensions.includes(asset.format)
-      ? FontMeta
-      : ImageMeta;
+  const Schema = fontExtensions.includes(asset.format) ? FontMeta : ImageMeta;
   const meta = Schema.parse(JSON.parse(asset.meta));
   return {
     ...asset,
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index 944b94a5bd..b2c782942b 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -6,7 +6,7 @@ type BaseData = {
   name: string;
   size: number;
   location: Location;
-  format?: string;
+  format: string;
 };
 
 type ImageData = BaseData & {
@@ -46,6 +46,9 @@ export const getAssetData = async (
   if (options.type === "image") {
     const sharpImage = sharp(options.buffer);
     const { width, height, format } = await sharpImage.metadata();
+    if (format === undefined) {
+      throw new Error("Unknown image format");
+    }
     return {
       ...baseData,
       type: options.type,
@@ -53,5 +56,6 @@ export const getAssetData = async (
       meta: { width, height },
     };
   }
-  return { type: options.type, ...baseData, meta: {} };
+  // @todo meta for fonts
+  return { type: options.type, ...baseData, format: "todo", meta: {} };
 };
diff --git a/packages/asset-uploader/src/utils/get-asset-path.test.ts b/packages/asset-uploader/src/utils/get-asset-path.test.ts
index 0701701e96..0e3563cd4c 100644
--- a/packages/asset-uploader/src/utils/get-asset-path.test.ts
+++ b/packages/asset-uploader/src/utils/get-asset-path.test.ts
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { Decimal } from "@prisma/client/runtime";
-import { Location } from "@webstudio-is/prisma-client";
+import { Asset, Location } from "@webstudio-is/prisma-client";
 
-const commonAsset = {
+const commonAsset: Asset = {
   id: "sa-546",
-  width: new Decimal(200),
-  height: new Decimal(200),
+  name: "test",
+  location: Location.FS,
   projectId: "id",
   size: 2135,
   format: "png",
   createdAt: new Date(),
-  alt: "",
+  description: "",
+  meta: JSON.stringify({ width: 200, height: 200 }),
 };
 
 describe("getAssetPath", () => {
diff --git a/packages/prisma-client/prisma/schema.prisma b/packages/prisma-client/prisma/schema.prisma
index c8acb2a27a..9f600f9737 100644
--- a/packages/prisma-client/prisma/schema.prisma
+++ b/packages/prisma-client/prisma/schema.prisma
@@ -26,7 +26,7 @@ model Asset {
   id          String   @id @default(uuid())
   project     Project  @relation(fields: [projectId], references: [id])
   projectId   String
-  format      String?
+  format      String
   size        Int
   name        String
   description String?

From 3262b99627e51fd9399a5583db902ad1106d9725 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 15 Sep 2022 12:39:39 +0200
Subject: [PATCH 06/24] ensure width/height is never undefined

---
 apps/designer/package.json                          | 1 -
 packages/asset-uploader/src/utils/format-asset.ts   | 8 ++++----
 packages/asset-uploader/src/utils/get-asset-data.ts | 4 ++++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/designer/package.json b/apps/designer/package.json
index d0eaafb304..f185e72f29 100644
--- a/apps/designer/package.json
+++ b/apps/designer/package.json
@@ -61,7 +61,6 @@
     "remix-auth-form": "^1.1.2",
     "remix-auth-github": "^1.1.1",
     "remix-auth-google": "^1.1.0",
-    "sharp": "^0.30.7",
     "slugify": "^1.6.5",
     "zod-form-data": "^1.2.1"
   },
diff --git a/packages/asset-uploader/src/utils/format-asset.ts b/packages/asset-uploader/src/utils/format-asset.ts
index f333c2f3f0..f6fffa0c2e 100644
--- a/packages/asset-uploader/src/utils/format-asset.ts
+++ b/packages/asset-uploader/src/utils/format-asset.ts
@@ -3,11 +3,11 @@ import { Asset as DbAsset } from "@webstudio-is/prisma-client";
 import { Asset } from "../types";
 import { getAssetPath } from "./get-asset-path";
 
-const fontExtensions = ["ttf", "otf", "woff", "woff2", "eot"];
+const fontFormats = ["ttf", "otf", "woff", "woff2", "eot"];
 
 const ImageMeta = z.object({
-  width: z.number().optional(),
-  height: z.number().optional(),
+  width: z.number(),
+  height: z.number(),
 });
 export type ImageMeta = z.infer<typeof ImageMeta>;
 
@@ -16,7 +16,7 @@ const FontMeta = z.object({});
 export type FontMeta = z.infer<typeof FontMeta>;
 
 export const formatAsset = (asset: DbAsset): Asset => {
-  const Schema = fontExtensions.includes(asset.format) ? FontMeta : ImageMeta;
+  const Schema = fontFormats.includes(asset.format) ? FontMeta : ImageMeta;
   const meta = Schema.parse(JSON.parse(asset.meta));
   return {
     ...asset,
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index b2c782942b..05bbe0e8db 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -49,6 +49,10 @@ export const getAssetData = async (
     if (format === undefined) {
       throw new Error("Unknown image format");
     }
+    if (width === undefined || height === undefined) {
+      throw new Error("Unknown image dimensions");
+    }
+
     return {
       ...baseData,
       type: options.type,

From bcaeab3b399f0e82a424cee8f73b139cd1f09534 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 15 Sep 2022 15:52:14 +0200
Subject: [PATCH 07/24] reuse the list of font formats we want to support

---
 apps/designer/app/designer/shared/assets/asset-upload.tsx | 4 ++--
 packages/asset-uploader/index.server.ts                   | 5 ++++-
 packages/asset-uploader/src/constants.ts                  | 1 +
 packages/asset-uploader/src/index.ts                      | 5 +----
 packages/asset-uploader/src/utils/format-asset.ts         | 5 ++---
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/designer/app/designer/shared/assets/asset-upload.tsx b/apps/designer/app/designer/shared/assets/asset-upload.tsx
index 3e27ca3bc9..243579c8ad 100644
--- a/apps/designer/app/designer/shared/assets/asset-upload.tsx
+++ b/apps/designer/app/designer/shared/assets/asset-upload.tsx
@@ -3,7 +3,7 @@ import ObjectID from "bson-objectid";
 import { ChangeEvent, useRef } from "react";
 import { Button, Flex, Text } from "@webstudio-is/design-system";
 import { UploadIcon } from "@webstudio-is/icons";
-import type { AssetType } from "@webstudio-is/asset-uploader";
+import { type AssetType, FONT_FORMATS } from "@webstudio-is/asset-uploader";
 import type { BaseAsset } from "./types";
 
 const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
@@ -33,7 +33,7 @@ const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
 
 const acceptMap = {
   image: "image/*",
-  font: ".woff2,.woff,.ttf",
+  font: FONT_FORMATS.map((format: string) => `.${format}`).join(", "),
 };
 
 type AssetUploadProps = {
diff --git a/packages/asset-uploader/index.server.ts b/packages/asset-uploader/index.server.ts
index e910bb060c..3e4ba71a06 100644
--- a/packages/asset-uploader/index.server.ts
+++ b/packages/asset-uploader/index.server.ts
@@ -1 +1,4 @@
-export * from "./src/index";
+export * from "./src/db";
+export * from "./src/upload";
+export * from "./src/delete";
+export * from "./src/utils/format-asset";
diff --git a/packages/asset-uploader/src/constants.ts b/packages/asset-uploader/src/constants.ts
index 6616fc8004..1e3589bc8b 100644
--- a/packages/asset-uploader/src/constants.ts
+++ b/packages/asset-uploader/src/constants.ts
@@ -1 +1,2 @@
 export const DEFAULT_UPLOAD_PATH = "public/uploads";
+export const FONT_FORMATS = ["ttf", "woff", "woff2"];
diff --git a/packages/asset-uploader/src/index.ts b/packages/asset-uploader/src/index.ts
index fb06bc78ac..b316008cdf 100644
--- a/packages/asset-uploader/src/index.ts
+++ b/packages/asset-uploader/src/index.ts
@@ -1,5 +1,2 @@
-export * from "./upload";
-export * from "./delete";
-export * from "./db";
-export * from "./utils/format-asset";
 export * from "./types";
+export * from "./constants";
diff --git a/packages/asset-uploader/src/utils/format-asset.ts b/packages/asset-uploader/src/utils/format-asset.ts
index f6fffa0c2e..a8d97f512a 100644
--- a/packages/asset-uploader/src/utils/format-asset.ts
+++ b/packages/asset-uploader/src/utils/format-asset.ts
@@ -2,8 +2,7 @@ import { z } from "zod";
 import { Asset as DbAsset } from "@webstudio-is/prisma-client";
 import { Asset } from "../types";
 import { getAssetPath } from "./get-asset-path";
-
-const fontFormats = ["ttf", "otf", "woff", "woff2", "eot"];
+import { FONT_FORMATS } from "../constants";
 
 const ImageMeta = z.object({
   width: z.number(),
@@ -16,7 +15,7 @@ const FontMeta = z.object({});
 export type FontMeta = z.infer<typeof FontMeta>;
 
 export const formatAsset = (asset: DbAsset): Asset => {
-  const Schema = fontFormats.includes(asset.format) ? FontMeta : ImageMeta;
+  const Schema = FONT_FORMATS.includes(asset.format) ? FontMeta : ImageMeta;
   const meta = Schema.parse(JSON.parse(asset.meta));
   return {
     ...asset,

From f3937220117fb8bffb8b3e2e6c2d6a4cb17ad112 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 16 Sep 2022 14:05:13 +0200
Subject: [PATCH 08/24] wait for designerReady event on the canvas before
 publishing data over postMessage

It is possible that the js of designer is loaded later than the js of canvas, because everything is server-rendered

we just ran into a case where disabling cache has hit the bug
---
 apps/designer/app/canvas/canvas.tsx              |  4 +++-
 .../app/canvas/shared/use-designer-ready.ts      | 16 ++++++++++++++++
 apps/designer/app/designer/designer.tsx          |  3 ++-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 apps/designer/app/canvas/shared/use-designer-ready.ts

diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx
index f5b3d76933..ce422c4fc1 100644
--- a/apps/designer/app/canvas/canvas.tsx
+++ b/apps/designer/app/canvas/canvas.tsx
@@ -46,6 +46,7 @@ import { usePublishScrollState } from "./shared/use-publish-scroll-state";
 import { useDragAndDrop } from "./shared/use-drag-drop";
 import { setInstanceChildrenMutable } from "~/shared/tree-utils";
 import { CanvasData } from "~/shared/db";
+import { useDesignerReady } from "./shared/use-designer-ready";
 
 registerContainers();
 
@@ -118,6 +119,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
+  const isDesignerReady = useDesignerReady();
   useInitializeBreakpoints(data.breakpoints);
   globalStyles();
   useAllUserProps(data.props);
@@ -129,7 +131,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
 
   if (elements === undefined) return null;
 
-  if (isPreviewMode) {
+  if (isPreviewMode || isDesignerReady === false) {
     return elements;
   }
 
diff --git a/apps/designer/app/canvas/shared/use-designer-ready.ts b/apps/designer/app/canvas/shared/use-designer-ready.ts
new file mode 100644
index 0000000000..81108a26f8
--- /dev/null
+++ b/apps/designer/app/canvas/shared/use-designer-ready.ts
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { useSubscribe } from "~/shared/pubsub";
+
+declare module "~/shared/pubsub" {
+  export interface PubsubMap {
+    designerReady: undefined;
+  }
+}
+
+export const useDesignerReady = () => {
+  const [isReady, setIsReady] = useState<boolean>(false);
+  useSubscribe("designerReady", () => {
+    setIsReady(true);
+  });
+  return isReady;
+};
diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index a268d51991..d051a8258b 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -232,8 +232,9 @@ export const Designer = ({ config, project }: DesignerProps) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
+      publish({ type: "designerReady" });
     },
-    [publishRef, onRefReadCanvasWidth, onRefReadCanvas]
+    [publishRef, onRefReadCanvasWidth, onRefReadCanvas, publish]
   );
 
   return (

From 4587a9212f96fa02d7a959d898764a74690ce3c4 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 16 Sep 2022 14:07:02 +0200
Subject: [PATCH 09/24] comment the designerReady event

---
 apps/designer/app/designer/designer.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index d051a8258b..f3108aacaa 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -232,6 +232,8 @@ export const Designer = ({ config, project }: DesignerProps) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
+      // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
+      // we can miss the events and designer will just not connect to the canvas.
       publish({ type: "designerReady" });
     },
     [publishRef, onRefReadCanvasWidth, onRefReadCanvas, publish]

From 161929717ef5d548144780fb54168d478c41c165 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 16 Sep 2022 16:51:05 +0200
Subject: [PATCH 10/24] render filtered image and fonts lists

fonts will currently only have the lists after the upload
---
 .../panels/asset-manager/asset-manager.tsx       |  2 +-
 .../app/designer/shared/assets/asset-upload.tsx  |  1 +
 .../designer/app/designer/shared/assets/types.ts |  2 +-
 .../app/designer/shared/assets/use-assets.ts     | 11 +++++++++--
 .../shared/fonts-manager/fonts-manager.tsx       |  2 +-
 packages/asset-uploader/src/index.ts             |  1 +
 .../asset-uploader/src/utils/filter-by-type.ts   | 16 ++++++++++++++++
 .../asset-uploader/src/utils/get-asset-data.ts   |  2 +-
 8 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 packages/asset-uploader/src/utils/filter-by-type.ts

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
index 62d03e0ca3..7bd6519a82 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
@@ -16,7 +16,7 @@ export const TabContent = ({
   onSetActiveTab: (tabName: TabName) => void;
   assets: Array<BaseAsset>;
 }) => {
-  const { assets, onUploadAsset } = useAssets(loadedAssets);
+  const { assets, onUploadAsset } = useAssets(loadedAssets, "image");
   return (
     <>
       <Header
diff --git a/apps/designer/app/designer/shared/assets/asset-upload.tsx b/apps/designer/app/designer/shared/assets/asset-upload.tsx
index 243579c8ad..23f56ad46e 100644
--- a/apps/designer/app/designer/shared/assets/asset-upload.tsx
+++ b/apps/designer/app/designer/shared/assets/asset-upload.tsx
@@ -22,6 +22,7 @@ const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
             description: file.name,
             size: file.size,
             meta: {},
+            format: "unknown",
           });
         });
         reader.readAsDataURL(file);
diff --git a/apps/designer/app/designer/shared/assets/types.ts b/apps/designer/app/designer/shared/assets/types.ts
index a5cf5c3fee..af0a1b919c 100644
--- a/apps/designer/app/designer/shared/assets/types.ts
+++ b/apps/designer/app/designer/shared/assets/types.ts
@@ -2,7 +2,7 @@ import { Asset } from "@webstudio-is/asset-uploader";
 
 export type BaseAsset = Pick<
   Asset,
-  "id" | "status" | "name" | "path" | "description" | "size" | "meta"
+  "id" | "status" | "name" | "path" | "description" | "size" | "meta" | "format"
 >;
 
 export type ActionData = {
diff --git a/apps/designer/app/designer/shared/assets/use-assets.ts b/apps/designer/app/designer/shared/assets/use-assets.ts
index f1c6157b00..3e5d5c4a7a 100644
--- a/apps/designer/app/designer/shared/assets/use-assets.ts
+++ b/apps/designer/app/designer/shared/assets/use-assets.ts
@@ -1,8 +1,12 @@
 import { useEffect, useState } from "react";
 import { useActionData } from "@remix-run/react";
 import type { BaseAsset, ActionData } from "./types";
+import { type AssetType, filterByType } from "@webstudio-is/asset-uploader";
 
-export const useAssets = (initialAssets: Array<BaseAsset> = []) => {
+export const useAssets = (
+  initialAssets: Array<BaseAsset> = [],
+  type: AssetType
+) => {
   const actionData: ActionData | undefined = useActionData();
   const [assets, setAssets] = useState<BaseAsset[]>(initialAssets);
 
@@ -33,5 +37,8 @@ export const useAssets = (initialAssets: Array<BaseAsset> = []) => {
   const onUploadAsset = (uploadedAssets: Array<BaseAsset>) =>
     setAssets((assets) => [...uploadedAssets, ...assets]);
 
-  return { assets, onUploadAsset };
+  return {
+    assets: filterByType<BaseAsset>(assets, type),
+    onUploadAsset,
+  };
 };
diff --git a/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx b/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
index 39367ac404..36754cc85b 100644
--- a/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
+++ b/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
@@ -2,7 +2,7 @@ import { Flex, Box } from "@webstudio-is/design-system";
 import { AssetUpload, useAssets } from "~/designer/shared/assets";
 
 export const FontsManager = () => {
-  const { assets, onUploadAsset } = useAssets([]);
+  const { assets, onUploadAsset } = useAssets([], "font");
   return (
     <Flex gap="3" direction="column" css={{ padding: "$1", paddingTop: "$2" }}>
       <Box css={{ padding: "$2" }}>
diff --git a/packages/asset-uploader/src/index.ts b/packages/asset-uploader/src/index.ts
index b316008cdf..5a86ad4cc6 100644
--- a/packages/asset-uploader/src/index.ts
+++ b/packages/asset-uploader/src/index.ts
@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./constants";
+export * from "./utils/filter-by-type";
diff --git a/packages/asset-uploader/src/utils/filter-by-type.ts b/packages/asset-uploader/src/utils/filter-by-type.ts
new file mode 100644
index 0000000000..c79809c2ec
--- /dev/null
+++ b/packages/asset-uploader/src/utils/filter-by-type.ts
@@ -0,0 +1,16 @@
+import type { Asset, AssetType } from "../types";
+import { FONT_FORMATS } from "../constants";
+
+export const filterByType = <PartialAsset extends { format: string }>(
+  assets: Array<PartialAsset>,
+  type: AssetType
+) => {
+  return assets.filter(({ format }: PartialAsset) => {
+    const isFont = FONT_FORMATS.includes(format);
+    if (type === "font") {
+      return true;
+    }
+
+    return isFont === false;
+  });
+};
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index 05bbe0e8db..b36db76858 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -61,5 +61,5 @@ export const getAssetData = async (
     };
   }
   // @todo meta for fonts
-  return { type: options.type, ...baseData, format: "todo", meta: {} };
+  return { type: options.type, ...baseData, format: "ttf", meta: {} };
 };

From c33b4dd073714d5d2e63bfe868bc44af2be7495d Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 16 Sep 2022 16:51:47 +0200
Subject: [PATCH 11/24] lint

---
 packages/asset-uploader/src/utils/filter-by-type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/asset-uploader/src/utils/filter-by-type.ts b/packages/asset-uploader/src/utils/filter-by-type.ts
index c79809c2ec..2be9dd3973 100644
--- a/packages/asset-uploader/src/utils/filter-by-type.ts
+++ b/packages/asset-uploader/src/utils/filter-by-type.ts
@@ -1,4 +1,4 @@
-import type { Asset, AssetType } from "../types";
+import type { AssetType } from "../types";
 import { FONT_FORMATS } from "../constants";
 
 export const filterByType = <PartialAsset extends { format: string }>(

From e472e0f1a2017a39225637926e041e3d9b9a977d Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 17 Sep 2022 12:24:54 +0200
Subject: [PATCH 12/24] get font meta data

---
 .../designer/shared/assets/asset-upload.tsx   |  2 +-
 packages/asset-uploader/package.json          |  2 +
 packages/asset-uploader/src/constants.ts      |  2 +-
 .../asset-uploader/src/targets/fs/upload.ts   |  2 +-
 .../asset-uploader/src/targets/s3/upload.ts   | 20 +++--
 .../src/utils/filter-by-type.ts               |  2 +-
 .../asset-uploader/src/utils/format-asset.ts  | 14 +++-
 .../src/utils/get-asset-data.ts               | 19 +++--
 .../src/utils/get-font-data.test.ts           | 52 +++++++++++++
 .../asset-uploader/src/utils/get-font-data.ts | 73 +++++++++++++++++
 .../src/utils/get-unique-filename.ts          |  6 +-
 .../asset-uploader/src/utils/to-buffer.ts     |  7 --
 .../src/utils/to-uint8-array.ts               | 10 +++
 yarn.lock                                     | 78 ++++++++++++++++++-
 14 files changed, 253 insertions(+), 36 deletions(-)
 create mode 100644 packages/asset-uploader/src/utils/get-font-data.test.ts
 create mode 100644 packages/asset-uploader/src/utils/get-font-data.ts
 delete mode 100644 packages/asset-uploader/src/utils/to-buffer.ts
 create mode 100644 packages/asset-uploader/src/utils/to-uint8-array.ts

diff --git a/apps/designer/app/designer/shared/assets/asset-upload.tsx b/apps/designer/app/designer/shared/assets/asset-upload.tsx
index 23f56ad46e..08cbd80ea3 100644
--- a/apps/designer/app/designer/shared/assets/asset-upload.tsx
+++ b/apps/designer/app/designer/shared/assets/asset-upload.tsx
@@ -21,7 +21,7 @@ const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
             status: "uploading",
             description: file.name,
             size: file.size,
-            meta: {},
+            meta: {} as any,
             format: "unknown",
           });
         });
diff --git a/packages/asset-uploader/package.json b/packages/asset-uploader/package.json
index 40108f6e82..cf94994739 100644
--- a/packages/asset-uploader/package.json
+++ b/packages/asset-uploader/package.json
@@ -17,10 +17,12 @@
     "@aws-sdk/lib-storage": "^3.131.0",
     "@webstudio-is/prisma-client": "*",
     "app-root-path": "^3.0.0",
+    "fontkit": "^2.0.2",
     "sharp": "^0.30.7"
   },
   "devDependencies": {
     "@types/app-root-path": "^1.2.4",
+    "@types/fontkit": "^1.8.0",
     "@types/node": "^18.7.16",
     "@types/sharp": "^0.30.4",
     "@webstudio-is/jest-config": "*",
diff --git a/packages/asset-uploader/src/constants.ts b/packages/asset-uploader/src/constants.ts
index 1e3589bc8b..f96d4e0df2 100644
--- a/packages/asset-uploader/src/constants.ts
+++ b/packages/asset-uploader/src/constants.ts
@@ -1,2 +1,2 @@
 export const DEFAULT_UPLOAD_PATH = "public/uploads";
-export const FONT_FORMATS = ["ttf", "woff", "woff2"];
+export const FONT_FORMATS = ["ttf", "woff", "woff2", "otf"] as const;
diff --git a/packages/asset-uploader/src/targets/fs/upload.ts b/packages/asset-uploader/src/targets/fs/upload.ts
index 46d22d136f..18e706ceb4 100644
--- a/packages/asset-uploader/src/targets/fs/upload.ts
+++ b/packages/asset-uploader/src/targets/fs/upload.ts
@@ -41,7 +41,7 @@ export const uploadToFs = async ({
       type: formDataFonts.includes(asset) ? "font" : "image",
       name: asset.name,
       size: asset.size,
-      buffer: (await asset.arrayBuffer()) as Uint8Array,
+      data: new Uint8Array(await asset.arrayBuffer()),
       location: Location.FS,
     })
   );
diff --git a/packages/asset-uploader/src/targets/s3/upload.ts b/packages/asset-uploader/src/targets/s3/upload.ts
index 476f784170..4a1cc69e70 100644
--- a/packages/asset-uploader/src/targets/s3/upload.ts
+++ b/packages/asset-uploader/src/targets/s3/upload.ts
@@ -7,7 +7,7 @@ import { PutObjectCommandInput } from "@aws-sdk/client-s3";
 import { Upload } from "@aws-sdk/lib-storage";
 import { Location } from "@webstudio-is/prisma-client";
 import { S3EnvVariables } from "../../schema";
-import { toBuffer } from "../../utils/to-buffer";
+import { toUint8Array } from "../../utils/to-uint8-array";
 import { getAssetData } from "../../utils/get-asset-data";
 import { createMany } from "../../db";
 import type { Asset } from "../../types";
@@ -36,9 +36,9 @@ export const uploadToS3 = async ({
       })
   );
 
-  // @todo fonts
   const imagesFormData = formData.getAll("image") as Array<string>;
-  const assetsData = imagesFormData.map((dataString) => {
+  const fontsFormData = formData.getAll("font") as Array<string>;
+  const assetsData = [...imagesFormData, ...fontsFormData].map((dataString) => {
     // @todo validate with zod
     return JSON.parse(dataString);
   });
@@ -61,12 +61,16 @@ const uploadHandler = async ({
   // this has to be a stream that goes directly to s3
   // Size check has to happen as you stream and interrupted when size is too big
   // Also check if S3 client has an option to check the size limit
-  const buffer = await toBuffer(file.data);
+  const data = await toUint8Array(file.data);
 
-  if (buffer.byteLength > maxSize) {
+  if (data.byteLength > maxSize) {
     throw new Error(`Asset cannot be bigger than ${maxSize}MB`);
   }
 
+  if (file.filename === undefined) {
+    throw new Error("Filename is required");
+  }
+
   const uniqueFilename = getUniqueFilename(file.filename);
 
   const s3Envs = S3EnvVariables.parse(process.env);
@@ -78,7 +82,7 @@ const uploadHandler = async ({
     ...ACL,
     Bucket: s3Envs.S3_BUCKET,
     Key: encodeURIComponent(uniqueFilename),
-    Body: buffer,
+    Body: data,
     ContentType: file.contentType,
     Metadata: {
       filename: file.filename || "unnamed",
@@ -95,8 +99,8 @@ const uploadHandler = async ({
 
   const baseAssetOptions = {
     name: uniqueFilename,
-    size: buffer.byteLength,
-    buffer,
+    size: data.byteLength,
+    data,
     location: Location.REMOTE,
   };
   let assetOptions;
diff --git a/packages/asset-uploader/src/utils/filter-by-type.ts b/packages/asset-uploader/src/utils/filter-by-type.ts
index 2be9dd3973..68c0d4f9d2 100644
--- a/packages/asset-uploader/src/utils/filter-by-type.ts
+++ b/packages/asset-uploader/src/utils/filter-by-type.ts
@@ -6,7 +6,7 @@ export const filterByType = <PartialAsset extends { format: string }>(
   type: AssetType
 ) => {
   return assets.filter(({ format }: PartialAsset) => {
-    const isFont = FONT_FORMATS.includes(format);
+    const isFont = FONT_FORMATS.includes(format as typeof FONT_FORMATS[number]);
     if (type === "font") {
       return true;
     }
diff --git a/packages/asset-uploader/src/utils/format-asset.ts b/packages/asset-uploader/src/utils/format-asset.ts
index a8d97f512a..36243c08c0 100644
--- a/packages/asset-uploader/src/utils/format-asset.ts
+++ b/packages/asset-uploader/src/utils/format-asset.ts
@@ -3,6 +3,7 @@ import { Asset as DbAsset } from "@webstudio-is/prisma-client";
 import { Asset } from "../types";
 import { getAssetPath } from "./get-asset-path";
 import { FONT_FORMATS } from "../constants";
+import { styles } from "./get-font-data";
 
 const ImageMeta = z.object({
   width: z.number(),
@@ -10,12 +11,19 @@ const ImageMeta = z.object({
 });
 export type ImageMeta = z.infer<typeof ImageMeta>;
 
-// @todo fonts meta
-const FontMeta = z.object({});
+export const FontMeta = z.object({
+  family: z.string(),
+  style: z.enum(styles),
+  weight: z.number(),
+});
 export type FontMeta = z.infer<typeof FontMeta>;
 
 export const formatAsset = (asset: DbAsset): Asset => {
-  const Schema = FONT_FORMATS.includes(asset.format) ? FontMeta : ImageMeta;
+  const Schema = FONT_FORMATS.includes(
+    asset.format as typeof FONT_FORMATS[number]
+  )
+    ? FontMeta
+    : ImageMeta;
   const meta = Schema.parse(JSON.parse(asset.meta));
   return {
     ...asset,
diff --git a/packages/asset-uploader/src/utils/get-asset-data.ts b/packages/asset-uploader/src/utils/get-asset-data.ts
index b36db76858..0cedfaa200 100644
--- a/packages/asset-uploader/src/utils/get-asset-data.ts
+++ b/packages/asset-uploader/src/utils/get-asset-data.ts
@@ -1,6 +1,7 @@
 import { Location } from "@webstudio-is/prisma-client";
 import sharp from "sharp";
-import type { FontMeta, ImageMeta } from "./format-asset";
+import { FontMeta, ImageMeta } from "./format-asset";
+import { getFontData } from "./get-font-data";
 
 type BaseData = {
   name: string;
@@ -16,7 +17,6 @@ type ImageData = BaseData & {
 
 type FontData = BaseData & {
   type: "font";
-  // @todo fonts meta
   meta: FontMeta;
 };
 
@@ -25,7 +25,7 @@ export type AssetData = ImageData | FontData;
 type BaseAssetOptions = {
   name: string;
   size: number;
-  buffer: Buffer | Uint8Array;
+  data: Uint8Array;
   location: Location;
 };
 
@@ -44,7 +44,7 @@ export const getAssetData = async (
     location: options.location,
   };
   if (options.type === "image") {
-    const sharpImage = sharp(options.buffer);
+    const sharpImage = sharp(options.data);
     const { width, height, format } = await sharpImage.metadata();
     if (format === undefined) {
       throw new Error("Unknown image format");
@@ -60,6 +60,13 @@ export const getAssetData = async (
       meta: { width, height },
     };
   }
-  // @todo meta for fonts
-  return { type: options.type, ...baseData, format: "ttf", meta: {} };
+
+  const { format, ...meta } = getFontData(options.data);
+
+  return {
+    type: options.type,
+    ...baseData,
+    format,
+    meta,
+  };
 };
diff --git a/packages/asset-uploader/src/utils/get-font-data.test.ts b/packages/asset-uploader/src/utils/get-font-data.test.ts
new file mode 100644
index 0000000000..84e9fe7f48
--- /dev/null
+++ b/packages/asset-uploader/src/utils/get-font-data.test.ts
@@ -0,0 +1,52 @@
+import { parseSubfamily } from "./get-font-data";
+
+describe("parseSubfamily()", () => {
+  test("Black Italic", () => {
+    expect(parseSubfamily("Black Italic")).toEqual({
+      style: "italic",
+      weight: 900,
+    });
+  });
+  test("Bold", () => {
+    expect(parseSubfamily("Bold")).toEqual({
+      style: "normal",
+      weight: 700,
+    });
+  });
+  test("Demi Bold Italic", () => {
+    expect(parseSubfamily("Demi Bold Italic")).toEqual({
+      style: "italic",
+      weight: 600,
+    });
+  });
+  test("Light", () => {
+    expect(parseSubfamily("Light")).toEqual({
+      style: "normal",
+      weight: 300,
+    });
+  });
+  test("Extra Light", () => {
+    expect(parseSubfamily("Extra Light")).toEqual({
+      style: "normal",
+      weight: 200,
+    });
+  });
+  test("Extra Light Italic", () => {
+    expect(parseSubfamily("Extra Light Italic")).toEqual({
+      style: "italic",
+      weight: 200,
+    });
+  });
+  test("Heavy Italic", () => {
+    expect(parseSubfamily("Heavy Italic")).toEqual({
+      style: "italic",
+      weight: 900,
+    });
+  });
+  test("Medium Italic", () => {
+    expect(parseSubfamily("Medium Italic")).toEqual({
+      style: "italic",
+      weight: 500,
+    });
+  });
+});
diff --git a/packages/asset-uploader/src/utils/get-font-data.ts b/packages/asset-uploader/src/utils/get-font-data.ts
new file mode 100644
index 0000000000..eee5f4ce51
--- /dev/null
+++ b/packages/asset-uploader/src/utils/get-font-data.ts
@@ -0,0 +1,73 @@
+import fontkit from "fontkit";
+import { FONT_FORMATS } from "../constants";
+
+// @todo sumbit this to definitely typed, they are not up to date
+declare module "fontkit" {
+  export interface Font {
+    type: string;
+    getName: (name: string) => string;
+  }
+}
+
+export const styles = ["normal", "italic", "oblique"] as const;
+type Style = typeof styles[number];
+
+const weights = {
+  thin: 100,
+  hairline: 100,
+  "extra light": 200,
+  "ultra light": 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  "semi bold": 600,
+  "demi bold": 600,
+  bold: 700,
+  "extra bold": 800,
+  "ultra bold": 800,
+  black: 900,
+  heavy: 900,
+} as const;
+
+type WeightKey = keyof typeof weights;
+type WeightValue = typeof weights[WeightKey];
+
+export const parseSubfamily = (subfamily: string) => {
+  const subfamilyLow = subfamily.toLowerCase();
+  let style: Style = "normal";
+  for (const possibleStyle of styles) {
+    if (subfamilyLow.includes(possibleStyle)) {
+      style = possibleStyle;
+      break;
+    }
+  }
+  let weight: WeightValue = weights.normal;
+  let possibleWeight: WeightKey;
+  for (possibleWeight in weights) {
+    if (subfamilyLow.includes(possibleWeight)) {
+      weight = weights[possibleWeight];
+      break;
+    }
+  }
+  return { style, weight };
+};
+
+export type FontData = {
+  format: typeof FONT_FORMATS[number];
+  family: string;
+  style: Style;
+  weight: WeightValue;
+};
+
+export const getFontData = (data: Uint8Array): FontData => {
+  const font = fontkit.create(data as Buffer);
+  const format = font.type.toLowerCase() as FontData["format"];
+  const family = font.getName("fontFamily");
+  const parsedSubfamily = parseSubfamily(font.getName("preferredSubfamily"));
+
+  return {
+    format,
+    family,
+    ...parsedSubfamily,
+  };
+};
diff --git a/packages/asset-uploader/src/utils/get-unique-filename.ts b/packages/asset-uploader/src/utils/get-unique-filename.ts
index 4e6deb2b54..370befe469 100644
--- a/packages/asset-uploader/src/utils/get-unique-filename.ts
+++ b/packages/asset-uploader/src/utils/get-unique-filename.ts
@@ -1,12 +1,8 @@
 import path from "path";
 import ObjectID from "bson-objectid";
 
-export const getUniqueFilename = (filename?: string): string => {
+export const getUniqueFilename = (filename: string): string => {
   const id = ObjectID().toString();
-  if (filename === undefined) {
-    // @todo we need to actually detect the extesion || ".jpeg"
-    return `${id}.jpeg`;
-  }
   const extension = path.extname(filename);
   const name = path.basename(filename, extension);
   return `${name}_${id}${extension}`;
diff --git a/packages/asset-uploader/src/utils/to-buffer.ts b/packages/asset-uploader/src/utils/to-buffer.ts
deleted file mode 100644
index 45100f4e9d..0000000000
--- a/packages/asset-uploader/src/utils/to-buffer.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const toBuffer = async (data: AsyncIterable<Uint8Array>) => {
-  const result = [];
-  for await (const chunk of data) {
-    result.push(chunk);
-  }
-  return Buffer.concat(result);
-};
diff --git a/packages/asset-uploader/src/utils/to-uint8-array.ts b/packages/asset-uploader/src/utils/to-uint8-array.ts
new file mode 100644
index 0000000000..7dfcdde457
--- /dev/null
+++ b/packages/asset-uploader/src/utils/to-uint8-array.ts
@@ -0,0 +1,10 @@
+export const toUint8Array = async (data: AsyncIterable<Uint8Array>) => {
+  const result = [];
+  for await (const chunk of data) {
+    for (const byte of chunk) {
+      result.push(byte);
+    }
+  }
+
+  return Uint8Array.from(result);
+};
diff --git a/yarn.lock b/yarn.lock
index 7583045aeb..112d549583 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4673,6 +4673,13 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
+"@swc/helpers@^0.4.2":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
@@ -4848,6 +4855,13 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/fontkit@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/fontkit/-/fontkit-1.8.0.tgz#2c100c8eada6f7403c3b740602f771bea4fd7971"
+  integrity sha512-hLlxFWmyMkWyJiO/RVc8L5OVxHXzoyH0ZKZsUQkhlKwUdUtwb77u7jjxVtdTpFHaAtfifbA8CQ4/QjcQcLiwDw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/fs-extra@^9.0.13":
   version "9.0.13"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
@@ -6416,7 +6430,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base64-js@^1.0.2, base64-js@^1.3.1:
+base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -6607,6 +6621,13 @@ brorand@^1.0.1, brorand@^1.1.0:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
 
+brotli@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/brotli/-/brotli-1.3.3.tgz#7365d8cc00f12cf765d2b2c898716bcf4b604d48"
+  integrity sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==
+  dependencies:
+    base64-js "^1.1.2"
+
 browser-assert@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/browser-assert/-/browser-assert-1.2.1.tgz#9aaa5a2a8c74685c2ae05bfe46efd606f068c200"
@@ -7224,6 +7245,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 clsx@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702"
@@ -8005,6 +8031,11 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
+dfa@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657"
+  integrity sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==
+
 diff-sequences@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
@@ -9661,6 +9692,21 @@ focus-lock@^0.8.0:
   dependencies:
     tslib "^1.9.3"
 
+fontkit@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fontkit/-/fontkit-2.0.2.tgz#ac5384f3ecab8327c6d2ea2e4d384afc544b48fd"
+  integrity sha512-jc4k5Yr8iov8QfS6u8w2CnHWVmbOGtdBtOXMze5Y+QD966Rx6PEVWXSEGwXlsDlKtu1G12cJjcsybnqhSk/+LA==
+  dependencies:
+    "@swc/helpers" "^0.4.2"
+    brotli "^1.3.2"
+    clone "^2.1.2"
+    dfa "^1.2.0"
+    fast-deep-equal "^3.1.3"
+    restructure "^3.0.0"
+    tiny-inflate "^1.0.3"
+    unicode-properties "^1.4.0"
+    unicode-trie "^2.0.0"
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -13839,7 +13885,7 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@~0.2.0:
+pako@^0.2.5, pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
@@ -15365,6 +15411,11 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+restructure@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/restructure/-/restructure-3.0.0.tgz#a55031d7ed3314bf585f815836fff9da3d65101d"
+  integrity sha512-Xj8/MEIhhfj9X2rmD9iJ4Gga9EFqVlpMj3vfLnV2r/Mh5jRMryNV+6lWh9GdJtDBcBSPIqzRdfBQ3wDtNFv/uw==
+
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
@@ -16646,6 +16697,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-inflate@^1.0.0, tiny-inflate@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
 tinycolor2@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
@@ -16841,7 +16897,7 @@ tslib@^1.0.0, tslib@^1.11.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -17133,11 +17189,27 @@ unicode-match-property-value-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
+unicode-properties@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/unicode-properties/-/unicode-properties-1.4.1.tgz#96a9cffb7e619a0dc7368c28da27e05fc8f9be5f"
+  integrity sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==
+  dependencies:
+    base64-js "^1.3.0"
+    unicode-trie "^2.0.0"
+
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
   integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
+unicode-trie@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
+  integrity sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==
+  dependencies:
+    pako "^0.2.5"
+    tiny-inflate "^1.0.0"
+
 unified@9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.0.tgz#67a62c627c40589edebbf60f53edfd4d822027f8"

From 589ca862f6ac62f19d23a277be938c01661353df Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 17 Sep 2022 12:53:11 +0200
Subject: [PATCH 13/24] better types

---
 .../panels/asset-manager/asset-thumbnail.tsx  | 10 ++++----
 .../designer/shared/assets/asset-upload.tsx   | 24 +++++++++----------
 .../app/designer/shared/assets/types.ts       |  5 ++++
 .../app/designer/shared/assets/use-assets.ts  |  9 +++----
 packages/asset-uploader/src/types.ts          |  2 +-
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
index 3abc279822..e712f1890a 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
@@ -4,7 +4,7 @@ import placeholderImage from "~/shared/images/image-placeholder.svg";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
 import { UploadingAnimation } from "./uploading-animation";
 import { AssetInfoTrigger, assetInfoTriggerCssVars } from "./asset-info-tigger";
-import type { BaseAsset } from "~/designer/shared/assets";
+import type { BaseAsset, PreviewAsset } from "~/designer/shared/assets";
 
 const useImageWithFallback = ({
   path = placeholderImage,
@@ -51,15 +51,17 @@ export const Thumbnail = ({ path, status }: ThumbnailProps) => {
   );
 };
 
-export const AssetThumbnail = (asset: BaseAsset) => {
-  const { path, description, status, name } = asset;
+export const AssetThumbnail = (asset: BaseAsset | PreviewAsset) => {
+  const { path, status, name } = asset;
+  const description =
+    "description" in asset && asset.description ? asset.description : name;
   const [isDeleting, setIsDeleting] = useState(false);
   const isUploading = status === "uploading";
   const isUploadedAsset = isUploading === false && "size" in asset;
 
   return (
     <Box
-      title={description || name}
+      title={description}
       css={{
         aspectRatio: "1/1",
         display: "flex",
diff --git a/apps/designer/app/designer/shared/assets/asset-upload.tsx b/apps/designer/app/designer/shared/assets/asset-upload.tsx
index 08cbd80ea3..3d7c8c28b7 100644
--- a/apps/designer/app/designer/shared/assets/asset-upload.tsx
+++ b/apps/designer/app/designer/shared/assets/asset-upload.tsx
@@ -4,25 +4,25 @@ import { ChangeEvent, useRef } from "react";
 import { Button, Flex, Text } from "@webstudio-is/design-system";
 import { UploadIcon } from "@webstudio-is/icons";
 import { type AssetType, FONT_FORMATS } from "@webstudio-is/asset-uploader";
-import type { BaseAsset } from "./types";
+import type { PreviewAsset } from "./types";
 
-const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
-  const assets: Array<Promise<BaseAsset>> = Array.from(fileList).map(
+const readAssets = (fileList: FileList): Promise<PreviewAsset[]> => {
+  const assets: Array<Promise<PreviewAsset>> = Array.from(fileList).map(
     (file) =>
-      new Promise((resolve) => {
+      new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.addEventListener("load", (event) => {
           const dataUri = event?.target?.result;
-          const path = dataUri ? String(dataUri) : undefined;
+          if (dataUri === undefined) {
+            return reject(new Error("Could not read file"));
+          }
+
           resolve({
-            path,
+            format: file.type.split("/")[1],
+            path: String(dataUri),
             name: file.name,
             id: ObjectID().toString(),
             status: "uploading",
-            description: file.name,
-            size: file.size,
-            meta: {} as any,
-            format: "unknown",
           });
         });
         reader.readAsDataURL(file);
@@ -34,11 +34,11 @@ const readAssets = (fileList: FileList): Promise<BaseAsset[]> => {
 
 const acceptMap = {
   image: "image/*",
-  font: FONT_FORMATS.map((format: string) => `.${format}`).join(", "),
+  font: FONT_FORMATS.map((format) => `.${format}`).join(", "),
 };
 
 type AssetUploadProps = {
-  onSubmit: (assets: Array<BaseAsset>) => void;
+  onSubmit: (assets: Array<PreviewAsset>) => void;
   type: AssetType;
 };
 
diff --git a/apps/designer/app/designer/shared/assets/types.ts b/apps/designer/app/designer/shared/assets/types.ts
index af0a1b919c..18f654dddd 100644
--- a/apps/designer/app/designer/shared/assets/types.ts
+++ b/apps/designer/app/designer/shared/assets/types.ts
@@ -5,6 +5,11 @@ export type BaseAsset = Pick<
   "id" | "status" | "name" | "path" | "description" | "size" | "meta" | "format"
 >;
 
+export type PreviewAsset = Pick<
+  BaseAsset,
+  "path" | "name" | "id" | "status" | "format"
+>;
+
 export type ActionData = {
   uploadedAssets?: Array<Asset>;
   deletedAsset?: Asset;
diff --git a/apps/designer/app/designer/shared/assets/use-assets.ts b/apps/designer/app/designer/shared/assets/use-assets.ts
index 3e5d5c4a7a..9f94dc05e9 100644
--- a/apps/designer/app/designer/shared/assets/use-assets.ts
+++ b/apps/designer/app/designer/shared/assets/use-assets.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useActionData } from "@remix-run/react";
-import type { BaseAsset, ActionData } from "./types";
+import type { BaseAsset, PreviewAsset, ActionData } from "./types";
 import { type AssetType, filterByType } from "@webstudio-is/asset-uploader";
 
 export const useAssets = (
@@ -8,7 +8,8 @@ export const useAssets = (
   type: AssetType
 ) => {
   const actionData: ActionData | undefined = useActionData();
-  const [assets, setAssets] = useState<BaseAsset[]>(initialAssets);
+  const [assets, setAssets] =
+    useState<Array<BaseAsset | PreviewAsset>>(initialAssets);
 
   useEffect(() => {
     const { errors, uploadedAssets, deletedAsset } = actionData ?? {};
@@ -34,11 +35,11 @@ export const useAssets = (
     }
   }, [actionData]);
 
-  const onUploadAsset = (uploadedAssets: Array<BaseAsset>) =>
+  const onUploadAsset = (uploadedAssets: Array<BaseAsset | PreviewAsset>) =>
     setAssets((assets) => [...uploadedAssets, ...assets]);
 
   return {
-    assets: filterByType<BaseAsset>(assets, type),
+    assets: filterByType<BaseAsset | PreviewAsset>(assets, type),
     onUploadAsset,
   };
 };
diff --git a/packages/asset-uploader/src/types.ts b/packages/asset-uploader/src/types.ts
index 0fceb9d21e..7494f95981 100644
--- a/packages/asset-uploader/src/types.ts
+++ b/packages/asset-uploader/src/types.ts
@@ -2,7 +2,7 @@ import { Asset as DbAsset } from "@webstudio-is/prisma-client";
 import type { FontMeta, ImageMeta } from "./utils/format-asset";
 
 export type Asset = Omit<DbAsset, "meta"> & {
-  path?: string;
+  path: string;
   status?: "uploading" | "uploaded";
   meta: ImageMeta | FontMeta;
 };

From 6d359b878cbce2a8a6bf8e96fdf59d46ae0af9b2 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 17 Sep 2022 17:17:55 +0200
Subject: [PATCH 14/24] make sure we always catch the iframe when its fully
 loaded

---
 apps/designer/app/canvas/canvas.tsx           |  4 +--
 .../app/canvas/shared/use-designer-ready.ts   |  2 +-
 apps/designer/app/designer/designer.tsx       | 26 +++++++++++++++----
 apps/designer/app/shared/dom-utils/index.ts   |  1 +
 .../app/shared/dom-utils/on-iframe-load.ts    | 16 ++++++++++++
 5 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 apps/designer/app/shared/dom-utils/on-iframe-load.ts

diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx
index ce422c4fc1..81914d2ae5 100644
--- a/apps/designer/app/canvas/canvas.tsx
+++ b/apps/designer/app/canvas/canvas.tsx
@@ -46,7 +46,7 @@ import { usePublishScrollState } from "./shared/use-publish-scroll-state";
 import { useDragAndDrop } from "./shared/use-drag-drop";
 import { setInstanceChildrenMutable } from "~/shared/tree-utils";
 import { CanvasData } from "~/shared/db";
-import { useDesignerReady } from "./shared/use-designer-ready";
+import { useSubscribeDesignerReady } from "./shared/use-designer-ready";
 
 registerContainers();
 
@@ -119,7 +119,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
-  const isDesignerReady = useDesignerReady();
+  const isDesignerReady = useSubscribeDesignerReady();
   useInitializeBreakpoints(data.breakpoints);
   globalStyles();
   useAllUserProps(data.props);
diff --git a/apps/designer/app/canvas/shared/use-designer-ready.ts b/apps/designer/app/canvas/shared/use-designer-ready.ts
index 81108a26f8..82ea83a792 100644
--- a/apps/designer/app/canvas/shared/use-designer-ready.ts
+++ b/apps/designer/app/canvas/shared/use-designer-ready.ts
@@ -7,7 +7,7 @@ declare module "~/shared/pubsub" {
   }
 }
 
-export const useDesignerReady = () => {
+export const useSubscribeDesignerReady = () => {
   const [isReady, setIsReady] = useState<boolean>(false);
   useSubscribe("designerReady", () => {
     setIsReady(true);
diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index f3108aacaa..84b5f56a12 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { type Publish, usePublish, useSubscribe } from "~/shared/pubsub";
 import type { Project } from "@webstudio-is/project";
 import type { Config } from "~/config";
@@ -33,6 +33,7 @@ import {
 import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
 import { PANEL_WIDTH } from "./shared/constants";
+import { onLoad } from "~/shared/dom-utils";
 
 export const links = () => {
   return [
@@ -68,6 +69,22 @@ const useNavigatorLayout = () => {
   return isLoaded ? clientSettings.navigatorLayout : "docked";
 };
 
+const usePublishDesignerReady = (publish: Publish) => {
+  const [ref, setRef] = useState(null);
+
+  useEffect(() => {
+    if (ref === null) return;
+
+    onLoad(ref).then(() => {
+      // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
+      // we can miss the events and designer will just not connect to the canvas.
+      publish({ type: "designerReady" });
+    });
+  }, [ref, publish]);
+
+  return setRef;
+};
+
 type SidePanelProps = {
   children: JSX.Element | Array<JSX.Element>;
   isPreviewMode: boolean;
@@ -226,17 +243,16 @@ export const Designer = ({ config, project }: DesignerProps) => {
   const onRefReadCanvasWidth = useUpdateCanvasWidth();
   const { onRef: onRefReadCanvas, onTransitionEnd } = useReadCanvasRect();
   const [dragAndDropState] = useDragAndDropState();
+  const onRefIframeReady = usePublishDesignerReady(publish);
 
   const iframeRefCallback = useCallback(
     (ref) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
-      // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
-      // we can miss the events and designer will just not connect to the canvas.
-      publish({ type: "designerReady" });
+      onRefIframeReady(ref);
     },
-    [publishRef, onRefReadCanvasWidth, onRefReadCanvas, publish]
+    [publishRef, onRefReadCanvasWidth, onRefReadCanvas, onRefIframeReady]
   );
 
   return (
diff --git a/apps/designer/app/shared/dom-utils/index.ts b/apps/designer/app/shared/dom-utils/index.ts
index b1120b975a..1304bcc6a9 100644
--- a/apps/designer/app/shared/dom-utils/index.ts
+++ b/apps/designer/app/shared/dom-utils/index.ts
@@ -1 +1,2 @@
 export * from "./instance";
+export * from "./on-iframe-load";
diff --git a/apps/designer/app/shared/dom-utils/on-iframe-load.ts b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
new file mode 100644
index 0000000000..766329bc54
--- /dev/null
+++ b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
@@ -0,0 +1,16 @@
+/**
+ * Resolve a promise when an iframe has readyState complete.
+ * Checks periodically for the readyState to be complete, because somttimes the load event may simply not fire for various reasons.
+ */
+export const onLoad = (iframe: HTMLIFrameElement) =>
+  new Promise((resolve) => {
+    if (iframe === null) return;
+    const check = () => {
+      if (document.readyState === "complete") {
+        clearInterval(intervalId);
+        resolve("complete");
+      }
+    };
+    iframe.addEventListener("load", check);
+    const intervalId = setInterval(check, 100);
+  });

From a5c61ee42f114f6de51fec210971ee2fff03bfa9 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 17 Sep 2022 20:01:04 +0200
Subject: [PATCH 15/24] check iframe document state, not main document

---
 apps/designer/app/shared/dom-utils/on-iframe-load.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/designer/app/shared/dom-utils/on-iframe-load.ts b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
index 766329bc54..c287171841 100644
--- a/apps/designer/app/shared/dom-utils/on-iframe-load.ts
+++ b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
@@ -6,7 +6,8 @@ export const onLoad = (iframe: HTMLIFrameElement) =>
   new Promise((resolve) => {
     if (iframe === null) return;
     const check = () => {
-      if (document.readyState === "complete") {
+      const document = iframe.contentDocument || iframe.contentWindow?.document;
+      if (document?.readyState === "complete") {
         clearInterval(intervalId);
         resolve("complete");
       }

From 5a7fdc4e794d70736518fd3782cbc19cad748d6b Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 17 Sep 2022 20:01:31 +0200
Subject: [PATCH 16/24] fix types

---
 apps/designer/app/shared/dom-utils/on-iframe-load.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/designer/app/shared/dom-utils/on-iframe-load.ts b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
index c287171841..3f32e706d6 100644
--- a/apps/designer/app/shared/dom-utils/on-iframe-load.ts
+++ b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
@@ -2,7 +2,7 @@
  * Resolve a promise when an iframe has readyState complete.
  * Checks periodically for the readyState to be complete, because somttimes the load event may simply not fire for various reasons.
  */
-export const onLoad = (iframe: HTMLIFrameElement) =>
+export const onLoad = (iframe: HTMLIFrameElement | null) =>
   new Promise((resolve) => {
     if (iframe === null) return;
     const check = () => {

From 6a82f9bed5573084a1c5863d348ed9980c1d859b Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 17 Sep 2022 20:05:35 +0200
Subject: [PATCH 17/24] better semantics

---
 apps/designer/app/designer/designer.tsx              | 4 ++--
 apps/designer/app/shared/dom-utils/on-iframe-load.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index 84b5f56a12..09ac9375df 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -33,7 +33,7 @@ import {
 import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
 import { PANEL_WIDTH } from "./shared/constants";
-import { onLoad } from "~/shared/dom-utils";
+import { onIframeLoad } from "~/shared/dom-utils";
 
 export const links = () => {
   return [
@@ -75,7 +75,7 @@ const usePublishDesignerReady = (publish: Publish) => {
   useEffect(() => {
     if (ref === null) return;
 
-    onLoad(ref).then(() => {
+    onIframeLoad(ref).then(() => {
       // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
       // we can miss the events and designer will just not connect to the canvas.
       publish({ type: "designerReady" });
diff --git a/apps/designer/app/shared/dom-utils/on-iframe-load.ts b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
index 3f32e706d6..3d85e18d39 100644
--- a/apps/designer/app/shared/dom-utils/on-iframe-load.ts
+++ b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
@@ -2,7 +2,7 @@
  * Resolve a promise when an iframe has readyState complete.
  * Checks periodically for the readyState to be complete, because somttimes the load event may simply not fire for various reasons.
  */
-export const onLoad = (iframe: HTMLIFrameElement | null) =>
+export const onIframeLoad = (iframe: HTMLIFrameElement | null) =>
   new Promise((resolve) => {
     if (iframe === null) return;
     const check = () => {

From 46e84271ece1e99d806c01edad5db0d0322c6daa Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 18 Sep 2022 13:21:09 +0200
Subject: [PATCH 18/24] use assets list from nano state, simplify logic overall

---
 apps/designer/app/designer/designer.tsx       | 14 +++-
 .../asset-info-tigger.tsx                     |  0
 .../{asset-manager => assets}/asset-info.tsx  |  0
 .../asset-manager.tsx                         | 10 +--
 .../asset-thumbnail.tsx                       |  0
 .../panels/{asset-manager => assets}/index.ts |  0
 .../uploading-animation.tsx                   |  0
 .../panels/{asset-manager => assets}/utils.ts |  0
 .../features/sidebar-left/panels/index.ts     |  4 +-
 .../features/sidebar-left/sidebar-left.tsx    | 12 +---
 .../app/designer/shared/assets/use-assets.ts  | 68 ++++++++++---------
 .../shared/fonts-manager/fonts-manager.tsx    |  2 +-
 .../app/designer/shared/nano-states/index.ts  |  4 ++
 .../src/utils/filter-by-type.ts               |  2 +-
 14 files changed, 62 insertions(+), 54 deletions(-)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/asset-info-tigger.tsx (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/asset-info.tsx (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/asset-manager.tsx (81%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/asset-thumbnail.tsx (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/index.ts (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/uploading-animation.tsx (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager => assets}/utils.ts (100%)

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index 09ac9375df..5b05b89995 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -7,6 +7,7 @@ import interStyles from "~/shared/font-faces/inter.css";
 import { SidebarLeft } from "./features/sidebar-left";
 import { Inspector } from "./features/inspector";
 import {
+  useAssets,
   useHoveredInstanceData,
   useSelectedInstanceData,
   useSyncStatus,
@@ -34,6 +35,7 @@ import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
 import { PANEL_WIDTH } from "./shared/constants";
 import { onIframeLoad } from "~/shared/dom-utils";
+import { Asset } from "@webstudio-is/asset-uploader";
 
 export const links = () => {
   return [
@@ -62,6 +64,15 @@ const useSubscribeSyncStatus = () => {
   useSubscribe("syncStatus", setValue);
 };
 
+const useSetAssets = (assets?: Array<Asset>) => {
+  const [, setAssets] = useAssets();
+  useEffect(() => {
+    if (assets) {
+      setAssets(assets);
+    }
+  }, [assets, setAssets]);
+};
+
 const useNavigatorLayout = () => {
   // We need to render the detached state only once the setting was actually loaded from local storage.
   // Otherwise we may show the detached state because its the default and then hide it immediately.
@@ -237,6 +248,7 @@ export const Designer = ({ config, project }: DesignerProps) => {
   useSubscribeSelectedInstanceData();
   useSubscribeHoveredInstanceData();
   useSubscribeBreakpoints();
+  useSetAssets(project.assets);
   const [publish, publishRef] = usePublish();
   const [isPreviewMode] = useIsPreviewMode();
   usePublishShortcuts(publish);
@@ -282,7 +294,7 @@ export const Designer = ({ config, project }: DesignerProps) => {
         </Workspace>
       </Main>
       <SidePanel gridArea="sidebar" isPreviewMode={isPreviewMode}>
-        <SidebarLeft assets={project.assets} publish={publish} />
+        <SidebarLeft publish={publish} />
       </SidePanel>
       <NavigatorPanel publish={publish} isPreviewMode={isPreviewMode} />
       <SidePanel
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info-tigger.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info-tigger.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info-tigger.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx
similarity index 81%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx
index 7bd6519a82..a576052fe2 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx
@@ -1,22 +1,16 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import { Box, Flex, Grid } from "@webstudio-is/design-system";
-import {
-  AssetUpload,
-  useAssets,
-  type BaseAsset,
-} from "~/designer/shared/assets";
+import { AssetUpload, useAssets } from "~/designer/shared/assets";
 import { TabName } from "../../types";
 import { Header } from "../../lib/header";
 import { AssetThumbnail } from "./asset-thumbnail";
 
 export const TabContent = ({
-  assets: loadedAssets,
   onSetActiveTab,
 }: {
   onSetActiveTab: (tabName: TabName) => void;
-  assets: Array<BaseAsset>;
 }) => {
-  const { assets, onUploadAsset } = useAssets(loadedAssets, "image");
+  const { assets, onUploadAsset } = useAssets("image");
   return (
     <>
       <Header
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-thumbnail.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/asset-thumbnail.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts b/apps/designer/app/designer/features/sidebar-left/panels/assets/index.ts
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/index.ts
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/uploading-animation.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/uploading-animation.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/uploading-animation.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/uploading-animation.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/utils.ts b/apps/designer/app/designer/features/sidebar-left/panels/assets/utils.ts
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager/utils.ts
rename to apps/designer/app/designer/features/sidebar-left/panels/assets/utils.ts
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/index.ts b/apps/designer/app/designer/features/sidebar-left/panels/index.ts
index ae8625e821..db4a8af5dd 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/index.ts
+++ b/apps/designer/app/designer/features/sidebar-left/panels/index.ts
@@ -1,5 +1,5 @@
 import * as components from "./components";
 import * as navigator from "./navigator";
-import * as assetManager from "./asset-manager";
+import * as assets from "./assets";
 
-export const panels = { components, navigator, assetManager } as const;
+export const panels = { components, navigator, assets } as const;
diff --git a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
index 8565e85077..03f82bd628 100644
--- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
@@ -12,17 +12,15 @@ import type { TabName } from "./types";
 import { isFeatureEnabled } from "~/shared/feature-flags";
 import { useClientSettings } from "~/designer/shared/client-settings";
 import { PANEL_WIDTH } from "~/designer/shared/constants";
-import { Asset } from "@webstudio-is/asset-uploader";
 import { Flex } from "@webstudio-is/design-system";
 
 const none = { TabContent: () => null };
 
 type SidebarLeftProps = {
   publish: Publish;
-  assets?: Array<Asset>;
 };
 
-export const SidebarLeft = ({ publish, assets }: SidebarLeftProps) => {
+export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
   const [dragAndDropState] = useDragAndDropState();
   const [activeTab, setActiveTab] = useState<TabName>("none");
   const { TabContent } = activeTab === "none" ? none : panels[activeTab];
@@ -38,7 +36,7 @@ export const SidebarLeft = ({ publish, assets }: SidebarLeftProps) => {
   const enabledPanels = (Object.keys(panels) as Array<TabName>).filter(
     (panel) => {
       switch (panel) {
-        case "assetManager":
+        case "assets":
           return isFeatureEnabled("assets");
         case "navigator":
           return clientSettings.navigatorLayout === "docked";
@@ -78,11 +76,7 @@ export const SidebarLeft = ({ publish, assets }: SidebarLeftProps) => {
             overflow: "auto",
           }}
         >
-          <TabContent
-            assets={assets || []}
-            publish={publish}
-            onSetActiveTab={setActiveTab}
-          />
+          <TabContent publish={publish} onSetActiveTab={setActiveTab} />
         </SidebarTabsContent>
       </SidebarTabs>
     </Flex>
diff --git a/apps/designer/app/designer/shared/assets/use-assets.ts b/apps/designer/app/designer/shared/assets/use-assets.ts
index 9f94dc05e9..a7318e0aae 100644
--- a/apps/designer/app/designer/shared/assets/use-assets.ts
+++ b/apps/designer/app/designer/shared/assets/use-assets.ts
@@ -1,45 +1,49 @@
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 import { useActionData } from "@remix-run/react";
 import type { BaseAsset, PreviewAsset, ActionData } from "./types";
 import { type AssetType, filterByType } from "@webstudio-is/asset-uploader";
+import { useAssets as useAllAssets } from "../nano-states";
 
-export const useAssets = (
-  initialAssets: Array<BaseAsset> = [],
-  type: AssetType
-) => {
+export const useAssets = (type: AssetType) => {
+  const [allAssets] = useAllAssets();
   const actionData: ActionData | undefined = useActionData();
-  const [assets, setAssets] =
-    useState<Array<BaseAsset | PreviewAsset>>(initialAssets);
+  const [uploadingAssets, setUploadingAssets] = useState<Array<PreviewAsset>>(
+    []
+  );
 
-  useEffect(() => {
-    const { errors, uploadedAssets, deletedAsset } = actionData ?? {};
-    if (errors) {
-      setAssets((currentAssets) =>
-        currentAssets.filter((asset) => asset.status !== "uploading")
+  const assets = useMemo(() => {
+    const { errors, uploadedAssets = [], deletedAsset } = actionData ?? {};
+    let assets: Array<BaseAsset | PreviewAsset> = [];
+
+    // Once we have uploaded or deleted assets in action data, current upload was finished.
+    if (
+      uploadedAssets.length === 0 &&
+      deletedAsset === undefined &&
+      errors === undefined
+    ) {
+      assets = [...uploadingAssets];
+    }
+
+    for (const uploadedAsset of uploadedAssets) {
+      const isInAllAssets = allAssets.some(
+        (asset) => asset.id === uploadedAsset.id
       );
+      if (isInAllAssets === false) {
+        assets.unshift(uploadedAsset);
+      }
     }
-    if (uploadedAssets?.length) {
-      setAssets((currentAssets) => [
-        ...uploadedAssets.filter((uploadedAsset) =>
-          currentAssets.every(
-            (currentAsset) => currentAsset.id !== uploadedAsset.id
-          )
-        ),
-        ...currentAssets.filter((asset) => asset.status !== "uploading"),
-      ]);
-    }
-    if (deletedAsset?.id) {
-      setAssets((currentAssets) => [
-        ...currentAssets.filter((asset) => asset.id !== deletedAsset.id),
-      ]);
-    }
-  }, [actionData]);
 
-  const onUploadAsset = (uploadedAssets: Array<BaseAsset | PreviewAsset>) =>
-    setAssets((assets) => [...uploadedAssets, ...assets]);
+    for (const asset of allAssets) {
+      if (asset.id !== deletedAsset?.id) {
+        assets.push(asset);
+      }
+    }
+
+    return filterByType(assets, type);
+  }, [actionData, uploadingAssets, type, allAssets]);
 
   return {
-    assets: filterByType<BaseAsset | PreviewAsset>(assets, type),
-    onUploadAsset,
+    assets,
+    onUploadAsset: setUploadingAssets,
   };
 };
diff --git a/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx b/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
index 36754cc85b..6143f82778 100644
--- a/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
+++ b/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
@@ -2,7 +2,7 @@ import { Flex, Box } from "@webstudio-is/design-system";
 import { AssetUpload, useAssets } from "~/designer/shared/assets";
 
 export const FontsManager = () => {
-  const { assets, onUploadAsset } = useAssets([], "font");
+  const { assets, onUploadAsset } = useAssets("font");
   return (
     <Flex gap="3" direction="column" css={{ padding: "$1", paddingTop: "$2" }}>
       <Box css={{ padding: "$2" }}>
diff --git a/apps/designer/app/designer/shared/nano-states/index.ts b/apps/designer/app/designer/shared/nano-states/index.ts
index cd80eed337..c53b0eb309 100644
--- a/apps/designer/app/designer/shared/nano-states/index.ts
+++ b/apps/designer/app/designer/shared/nano-states/index.ts
@@ -5,6 +5,7 @@ import {
   type HoveredInstanceData,
 } from "~/shared/canvas-components";
 import { type SyncStatus } from "~/shared/sync";
+import { BaseAsset } from "../assets";
 
 const selectedInstanceDataContainer = createValueContainer<
   SelectedInstanceData | undefined
@@ -45,3 +46,6 @@ export const useSyncStatus = () => useValue(syncStatusContainer);
 
 const selectionRectContainer = createValueContainer<DOMRect | undefined>();
 export const useSelectionRect = () => useValue(selectionRectContainer);
+
+const assetsContainer = createValueContainer<Array<BaseAsset>>([]);
+export const useAssets = () => useValue(assetsContainer);
diff --git a/packages/asset-uploader/src/utils/filter-by-type.ts b/packages/asset-uploader/src/utils/filter-by-type.ts
index 68c0d4f9d2..34ee692fc8 100644
--- a/packages/asset-uploader/src/utils/filter-by-type.ts
+++ b/packages/asset-uploader/src/utils/filter-by-type.ts
@@ -8,7 +8,7 @@ export const filterByType = <PartialAsset extends { format: string }>(
   return assets.filter(({ format }: PartialAsset) => {
     const isFont = FONT_FORMATS.includes(format as typeof FONT_FORMATS[number]);
     if (type === "font") {
-      return true;
+      return isFont;
     }
 
     return isFont === false;

From 145055f1ea605deff5cf5d7b681113de743a4b27 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 18 Sep 2022 17:13:52 +0200
Subject: [PATCH 19/24] Update spacing-control.tsx

---
 .../features/style-panel/controls/spacing/spacing-control.tsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/designer/app/designer/features/style-panel/controls/spacing/spacing-control.tsx b/apps/designer/app/designer/features/style-panel/controls/spacing/spacing-control.tsx
index e0834e1599..3c97a8e471 100644
--- a/apps/designer/app/designer/features/style-panel/controls/spacing/spacing-control.tsx
+++ b/apps/designer/app/designer/features/style-panel/controls/spacing/spacing-control.tsx
@@ -68,6 +68,8 @@ const styles = {
     border: "none",
     textAlign: "center",
     outline: "none",
+    // No idea why it's hidden otherwise
+    zIndex: 0,
   },
   inputFromCurrentBreakpoint: {
     color: propertyNameColorForSelectedBreakpoint,

From 13c071b08f2565dcccda9afd7fef7754d565530e Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 19 Sep 2022 12:32:06 +0300
Subject: [PATCH 20/24] Update favicon.ico

---
 apps/designer/public/favicon.ico | Bin 15406 -> 15086 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/apps/designer/public/favicon.ico b/apps/designer/public/favicon.ico
index 7d3314f0428243b37f4f450bf27c7e036493c815..9cb8c815dc0abbc6b9038edea292275bf56e2537 100644
GIT binary patch
literal 15086
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
NPS;av>ny9R_rKT{U=08O

literal 15406
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


From 228a269b395110b4e7f096a7a23fa5eef5afcb63 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 19 Sep 2022 17:08:25 +0300
Subject: [PATCH 21/24] BaseAsset > Asset

---
 .../sidebar-left/panels/assets/asset-info-tigger.tsx   |  5 ++---
 .../features/sidebar-left/panels/assets/asset-info.tsx |  4 ++--
 .../sidebar-left/panels/assets/asset-thumbnail.tsx     |  7 ++++---
 apps/designer/app/designer/shared/assets/types.ts      |  7 +------
 apps/designer/app/designer/shared/assets/use-assets.ts | 10 +++++++---
 apps/designer/app/designer/shared/nano-states/index.ts |  4 ++--
 6 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info-tigger.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info-tigger.tsx
index 090d9ff201..eb8c285963 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info-tigger.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info-tigger.tsx
@@ -8,10 +8,9 @@ import {
   PopoverHeader,
 } from "@webstudio-is/design-system";
 import { GearIcon, gearIconCssVars } from "@webstudio-is/icons";
-
 import { AssetInfo } from "./asset-info";
 import { cssVars } from "@webstudio-is/css-vars";
-import { BaseAsset } from "~/designer/shared/assets";
+import { Asset } from "@webstudio-is/asset-uploader";
 
 const triggerVisibilityVar = cssVars.define("trigger-visibility");
 
@@ -23,7 +22,7 @@ export const AssetInfoTrigger = ({
   asset,
   onDelete,
 }: {
-  asset: BaseAsset;
+  asset: Asset;
   onDelete: () => void;
 }) => {
   const [isInfoOpen, setInfoOpen] = useState(false);
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info.tsx
index 659179607c..491709c4a4 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-info.tsx
@@ -8,7 +8,7 @@ import {
 } from "@webstudio-is/icons";
 import { useSubmit } from "@remix-run/react";
 import prettyBytes from "pretty-bytes";
-import type { BaseAsset } from "~/designer/shared/assets";
+import { Asset } from "@webstudio-is/asset-uploader";
 
 const Filename = ({ name }: { name: string }) => {
   const splitName = name.split(".");
@@ -45,7 +45,7 @@ const Filename = ({ name }: { name: string }) => {
   );
 };
 
-type AssetInfoProps = BaseAsset & {
+type AssetInfoProps = Asset & {
   onClose: () => void;
   onDelete: () => void;
 };
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-thumbnail.tsx
index e712f1890a..19b95ba005 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-thumbnail.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-thumbnail.tsx
@@ -4,7 +4,8 @@ import placeholderImage from "~/shared/images/image-placeholder.svg";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
 import { UploadingAnimation } from "./uploading-animation";
 import { AssetInfoTrigger, assetInfoTriggerCssVars } from "./asset-info-tigger";
-import type { BaseAsset, PreviewAsset } from "~/designer/shared/assets";
+import type { PreviewAsset } from "~/designer/shared/assets";
+import { Asset } from "@webstudio-is/asset-uploader";
 
 const useImageWithFallback = ({
   path = placeholderImage,
@@ -25,7 +26,7 @@ const useImageWithFallback = ({
 
 type ThumbnailProps = {
   path?: string;
-  status: BaseAsset["status"];
+  status: Asset["status"];
 };
 
 export const Thumbnail = ({ path, status }: ThumbnailProps) => {
@@ -51,7 +52,7 @@ export const Thumbnail = ({ path, status }: ThumbnailProps) => {
   );
 };
 
-export const AssetThumbnail = (asset: BaseAsset | PreviewAsset) => {
+export const AssetThumbnail = (asset: Asset | PreviewAsset) => {
   const { path, status, name } = asset;
   const description =
     "description" in asset && asset.description ? asset.description : name;
diff --git a/apps/designer/app/designer/shared/assets/types.ts b/apps/designer/app/designer/shared/assets/types.ts
index 18f654dddd..e8c18f403f 100644
--- a/apps/designer/app/designer/shared/assets/types.ts
+++ b/apps/designer/app/designer/shared/assets/types.ts
@@ -1,12 +1,7 @@
 import { Asset } from "@webstudio-is/asset-uploader";
 
-export type BaseAsset = Pick<
-  Asset,
-  "id" | "status" | "name" | "path" | "description" | "size" | "meta" | "format"
->;
-
 export type PreviewAsset = Pick<
-  BaseAsset,
+  Asset,
   "path" | "name" | "id" | "status" | "format"
 >;
 
diff --git a/apps/designer/app/designer/shared/assets/use-assets.ts b/apps/designer/app/designer/shared/assets/use-assets.ts
index a7318e0aae..c9f746836d 100644
--- a/apps/designer/app/designer/shared/assets/use-assets.ts
+++ b/apps/designer/app/designer/shared/assets/use-assets.ts
@@ -1,7 +1,11 @@
 import { useMemo, useState } from "react";
 import { useActionData } from "@remix-run/react";
-import type { BaseAsset, PreviewAsset, ActionData } from "./types";
-import { type AssetType, filterByType } from "@webstudio-is/asset-uploader";
+import type { PreviewAsset, ActionData } from "./types";
+import {
+  type AssetType,
+  type Asset,
+  filterByType,
+} from "@webstudio-is/asset-uploader";
 import { useAssets as useAllAssets } from "../nano-states";
 
 export const useAssets = (type: AssetType) => {
@@ -13,7 +17,7 @@ export const useAssets = (type: AssetType) => {
 
   const assets = useMemo(() => {
     const { errors, uploadedAssets = [], deletedAsset } = actionData ?? {};
-    let assets: Array<BaseAsset | PreviewAsset> = [];
+    let assets: Array<Asset | PreviewAsset> = [];
 
     // Once we have uploaded or deleted assets in action data, current upload was finished.
     if (
diff --git a/apps/designer/app/designer/shared/nano-states/index.ts b/apps/designer/app/designer/shared/nano-states/index.ts
index c53b0eb309..667f42f760 100644
--- a/apps/designer/app/designer/shared/nano-states/index.ts
+++ b/apps/designer/app/designer/shared/nano-states/index.ts
@@ -5,7 +5,7 @@ import {
   type HoveredInstanceData,
 } from "~/shared/canvas-components";
 import { type SyncStatus } from "~/shared/sync";
-import { BaseAsset } from "../assets";
+import { Asset } from "@webstudio-is/asset-uploader";
 
 const selectedInstanceDataContainer = createValueContainer<
   SelectedInstanceData | undefined
@@ -47,5 +47,5 @@ export const useSyncStatus = () => useValue(syncStatusContainer);
 const selectionRectContainer = createValueContainer<DOMRect | undefined>();
 export const useSelectionRect = () => useValue(selectionRectContainer);
 
-const assetsContainer = createValueContainer<Array<BaseAsset>>([]);
+const assetsContainer = createValueContainer<Array<Asset>>([]);
 export const useAssets = () => useValue(assetsContainer);

From b76ef631d0df8f9a5becef535b1d6c59db1f59e2 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 19 Sep 2022 17:27:39 +0300
Subject: [PATCH 22/24] move useActionData into the asset upload

---
 .../panels/assets/asset-manager.tsx           |  8 ++++++--
 .../designer/shared/assets/asset-upload.tsx   | 20 +++++++++++++++----
 .../app/designer/shared/assets/use-assets.ts  |  6 +++---
 .../shared/fonts-manager/fonts-manager.tsx    |  8 ++++++--
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx
index a576052fe2..9662e5f320 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/assets/asset-manager.tsx
@@ -10,7 +10,7 @@ export const TabContent = ({
 }: {
   onSetActiveTab: (tabName: TabName) => void;
 }) => {
-  const { assets, onUploadAsset } = useAssets("image");
+  const { assets, onSubmitAssets, onActionData } = useAssets("image");
   return (
     <>
       <Header
@@ -25,7 +25,11 @@ export const TabContent = ({
         css={{ padding: "$1", paddingTop: "$2" }}
       >
         <Box css={{ padding: "$2" }}>
-          <AssetUpload onSubmit={onUploadAsset} type="image" />
+          <AssetUpload
+            onSubmit={onSubmitAssets}
+            onActionData={onActionData}
+            type="image"
+          />
         </Box>
         <Grid columns={2} gap={2}>
           {assets.map((asset) => (
diff --git a/apps/designer/app/designer/shared/assets/asset-upload.tsx b/apps/designer/app/designer/shared/assets/asset-upload.tsx
index 3d7c8c28b7..fe9c1b9a25 100644
--- a/apps/designer/app/designer/shared/assets/asset-upload.tsx
+++ b/apps/designer/app/designer/shared/assets/asset-upload.tsx
@@ -1,10 +1,10 @@
-import { Form, useSubmit } from "@remix-run/react";
+import { Form, useActionData, useSubmit } from "@remix-run/react";
 import ObjectID from "bson-objectid";
-import { ChangeEvent, useRef } from "react";
+import { ChangeEvent, useEffect, useRef } from "react";
 import { Button, Flex, Text } from "@webstudio-is/design-system";
 import { UploadIcon } from "@webstudio-is/icons";
 import { type AssetType, FONT_FORMATS } from "@webstudio-is/asset-uploader";
-import type { PreviewAsset } from "./types";
+import type { ActionData, PreviewAsset } from "./types";
 
 const readAssets = (fileList: FileList): Promise<PreviewAsset[]> => {
   const assets: Array<Promise<PreviewAsset>> = Array.from(fileList).map(
@@ -38,13 +38,19 @@ const acceptMap = {
 };
 
 type AssetUploadProps = {
+  onActionData: (data: ActionData) => void;
   onSubmit: (assets: Array<PreviewAsset>) => void;
   type: AssetType;
 };
 
-export const AssetUpload = ({ onSubmit, type }: AssetUploadProps) => {
+export const AssetUpload = ({
+  onSubmit,
+  onActionData,
+  type,
+}: AssetUploadProps) => {
   const submit = useSubmit();
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const actionData: ActionData | undefined = useActionData();
 
   const onFormChange = (event: ChangeEvent<HTMLFormElement>) => {
     const newFiles = inputRef?.current?.files;
@@ -55,6 +61,12 @@ export const AssetUpload = ({ onSubmit, type }: AssetUploadProps) => {
     }
   };
 
+  useEffect(() => {
+    if (actionData !== undefined) {
+      onActionData(actionData);
+    }
+  }, [actionData, onActionData]);
+
   return (
     <Flex
       as={Form}
diff --git a/apps/designer/app/designer/shared/assets/use-assets.ts b/apps/designer/app/designer/shared/assets/use-assets.ts
index c9f746836d..dc0b2d7674 100644
--- a/apps/designer/app/designer/shared/assets/use-assets.ts
+++ b/apps/designer/app/designer/shared/assets/use-assets.ts
@@ -1,5 +1,4 @@
 import { useMemo, useState } from "react";
-import { useActionData } from "@remix-run/react";
 import type { PreviewAsset, ActionData } from "./types";
 import {
   type AssetType,
@@ -10,7 +9,7 @@ import { useAssets as useAllAssets } from "../nano-states";
 
 export const useAssets = (type: AssetType) => {
   const [allAssets] = useAllAssets();
-  const actionData: ActionData | undefined = useActionData();
+  const [actionData, setActionData] = useState<ActionData>({});
   const [uploadingAssets, setUploadingAssets] = useState<Array<PreviewAsset>>(
     []
   );
@@ -48,6 +47,7 @@ export const useAssets = (type: AssetType) => {
 
   return {
     assets,
-    onUploadAsset: setUploadingAssets,
+    onSubmitAssets: setUploadingAssets,
+    onActionData: setActionData,
   };
 };
diff --git a/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx b/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
index 6143f82778..b4586902e2 100644
--- a/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
+++ b/apps/designer/app/designer/shared/fonts-manager/fonts-manager.tsx
@@ -2,11 +2,15 @@ import { Flex, Box } from "@webstudio-is/design-system";
 import { AssetUpload, useAssets } from "~/designer/shared/assets";
 
 export const FontsManager = () => {
-  const { assets, onUploadAsset } = useAssets("font");
+  const { assets, onSubmitAssets, onActionData } = useAssets("font");
   return (
     <Flex gap="3" direction="column" css={{ padding: "$1", paddingTop: "$2" }}>
       <Box css={{ padding: "$2" }}>
-        <AssetUpload onSubmit={onUploadAsset} type="font" />
+        <AssetUpload
+          onSubmit={onSubmitAssets}
+          onActionData={onActionData}
+          type="font"
+        />
       </Box>
       {assets.map((asset) => asset.name)}
     </Flex>

From d4e0d7d4f25d2ccdbb1d04e736bd8995c97363bb Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 19 Sep 2022 18:42:50 +0300
Subject: [PATCH 23/24] use polling over postMessage to detect when canvas is
 ready

---
 .../app/canvas/shared/use-designer-ready.ts   |  4 +++-
 apps/designer/app/designer/designer.tsx       | 24 +++++++++----------
 apps/designer/app/shared/dom-utils/index.ts   |  1 -
 .../app/shared/dom-utils/on-iframe-load.ts    | 17 -------------
 4 files changed, 15 insertions(+), 31 deletions(-)
 delete mode 100644 apps/designer/app/shared/dom-utils/on-iframe-load.ts

diff --git a/apps/designer/app/canvas/shared/use-designer-ready.ts b/apps/designer/app/canvas/shared/use-designer-ready.ts
index 82ea83a792..1a13769ca1 100644
--- a/apps/designer/app/canvas/shared/use-designer-ready.ts
+++ b/apps/designer/app/canvas/shared/use-designer-ready.ts
@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { useSubscribe } from "~/shared/pubsub";
+import { publish, useSubscribe } from "~/shared/pubsub";
 
 declare module "~/shared/pubsub" {
   export interface PubsubMap {
     designerReady: undefined;
+    designerReadyAck: undefined;
   }
 }
 
@@ -11,6 +12,7 @@ export const useSubscribeDesignerReady = () => {
   const [isReady, setIsReady] = useState<boolean>(false);
   useSubscribe("designerReady", () => {
     setIsReady(true);
+    publish({ type: "designerReadyAck" });
   });
   return isReady;
 };
diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index 5b05b89995..539cd507ba 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -34,8 +34,8 @@ import {
 import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
 import { PANEL_WIDTH } from "./shared/constants";
-import { onIframeLoad } from "~/shared/dom-utils";
 import { Asset } from "@webstudio-is/asset-uploader";
+import { useInterval } from "react-use";
 
 export const links = () => {
   return [
@@ -81,19 +81,20 @@ const useNavigatorLayout = () => {
 };
 
 const usePublishDesignerReady = (publish: Publish) => {
-  const [ref, setRef] = useState(null);
+  const [isAcknowledged, setIsAcknowledged] = useState(false);
 
-  useEffect(() => {
-    if (ref === null) return;
-
-    onIframeLoad(ref).then(() => {
+  useInterval(
+    () => {
       // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
       // we can miss the events and designer will just not connect to the canvas.
       publish({ type: "designerReady" });
-    });
-  }, [ref, publish]);
+    },
+    isAcknowledged ? null : 100
+  );
 
-  return setRef;
+  useSubscribe("designerReadyAck", () => {
+    setIsAcknowledged(true);
+  });
 };
 
 type SidePanelProps = {
@@ -255,16 +256,15 @@ export const Designer = ({ config, project }: DesignerProps) => {
   const onRefReadCanvasWidth = useUpdateCanvasWidth();
   const { onRef: onRefReadCanvas, onTransitionEnd } = useReadCanvasRect();
   const [dragAndDropState] = useDragAndDropState();
-  const onRefIframeReady = usePublishDesignerReady(publish);
+  usePublishDesignerReady(publish);
 
   const iframeRefCallback = useCallback(
     (ref) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
-      onRefIframeReady(ref);
     },
-    [publishRef, onRefReadCanvasWidth, onRefReadCanvas, onRefIframeReady]
+    [publishRef, onRefReadCanvasWidth, onRefReadCanvas]
   );
 
   return (
diff --git a/apps/designer/app/shared/dom-utils/index.ts b/apps/designer/app/shared/dom-utils/index.ts
index 1304bcc6a9..b1120b975a 100644
--- a/apps/designer/app/shared/dom-utils/index.ts
+++ b/apps/designer/app/shared/dom-utils/index.ts
@@ -1,2 +1 @@
 export * from "./instance";
-export * from "./on-iframe-load";
diff --git a/apps/designer/app/shared/dom-utils/on-iframe-load.ts b/apps/designer/app/shared/dom-utils/on-iframe-load.ts
deleted file mode 100644
index 3d85e18d39..0000000000
--- a/apps/designer/app/shared/dom-utils/on-iframe-load.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Resolve a promise when an iframe has readyState complete.
- * Checks periodically for the readyState to be complete, because somttimes the load event may simply not fire for various reasons.
- */
-export const onIframeLoad = (iframe: HTMLIFrameElement | null) =>
-  new Promise((resolve) => {
-    if (iframe === null) return;
-    const check = () => {
-      const document = iframe.contentDocument || iframe.contentWindow?.document;
-      if (document?.readyState === "complete") {
-        clearInterval(intervalId);
-        resolve("complete");
-      }
-    };
-    iframe.addEventListener("load", check);
-    const intervalId = setInterval(check, 100);
-  });

From d306f2ec71df407acab62ed33788a7c5abb09617 Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Tue, 20 Sep 2022 11:41:15 +0300
Subject: [PATCH 24/24] fix a bug where Bold can be expanded in tree

---
 apps/designer/app/designer/shared/tree/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/designer/app/designer/shared/tree/index.tsx b/apps/designer/app/designer/shared/tree/index.tsx
index f47c5e3247..e2a447362f 100644
--- a/apps/designer/app/designer/shared/tree/index.tsx
+++ b/apps/designer/app/designer/shared/tree/index.tsx
@@ -23,9 +23,14 @@ const instanceRelatedProps = {
     return components[item.component].canAcceptChildren;
   },
   getItemChildren(item: Instance) {
-    // Only content editable components can have `string` children
-    // and this cab be a hot path for performance.
-    if (components[item.component].isContentEditable === false) {
+    const component = components[item.component];
+
+    // We want to avoid calling .filter() unnecessarily, because this is a hot path for performance.
+    // We rely on the fact that only content editable or inline components may have `string` children.
+    if (
+      component.isContentEditable === false &&
+      component.isInlineOnly === false
+    ) {
       return item.children as Instance[];
     }