add system font loading

improve drawing
implement staggered text
begin refactor of drawing code

app/src/stores/entities.store.ts

@@ -13,6 +13,10 @@ interface EntitiesStore {
     index: number,
     entity: Partial<z.input<typeof AnimatedEntity>>
   ) => void;
+  updateEntityById: (
+    id: string,
+    entity: Partial<z.input<typeof AnimatedEntity>>
+  ) => void;
 }
 
 const useEntitiesStore = create<EntitiesStore>((set) => ({
@@ -20,6 +24,18 @@ const useEntitiesStore = create<EntitiesStore>((set) => ({
   selectEntity: (index) => set(() => ({ selectedEntity: index })),
   deselectEntity: () => set(() => ({ selectedEntity: undefined })),
   selectedEntity: undefined,
+  updateEntityById: (id, entity) =>
+    set(({ entities }) => {
+      const nextEntities = produce(entities, (draft) => {
+        const index = draft.findIndex((e) => e.id === id);
+
+        draft[index] = { ...draft[index], ...entity } as z.infer<
+          typeof AnimatedEntity
+        >;
+      });
+
+      return { entities: nextEntities };
+    }),
   updateEntity: (index, entity) =>
     set(({ entities }) => {
       const nextEntities = produce(entities, (draft) => {